一半前端一半设计

有次无意间看到了百度浏览器的动画效果，一直恋恋不忘，终于抽了点空仿了一个场景，感觉steps animation逐帧动画还是很强大呀。点击查看效果一、案例分析1、星空背景的运动和三层山的运动需要掌握背...

这个案例因为写错了一个transition的单词，害得我花了一个下午的时间，真的眼睛都瞎了，以后不要再犯这种低级错误  >_<查看效果案例源代码下载链接: https://pan...

学完了transform这个课程，还是来一个案例吧，利用transform的旋转rotate打造一个时钟，再结合JavaScript的定时器让它走起来。截一个动图：点击查看效果源文件下载↓链接: ht...

这个专题页我挺喜欢的，就在上课的时候简单的仿制了一下，不过没有设置video和图片的切换，直接用了图片，算是阉割版了。下面的3D旋转使用了不同的方式，把图片也包括进去了，原始版本是只有边框旋转，图片不...

一个月的ps基础课程教学终于结束，网站也好久没有更新了，今天学生们准备项目汇报的作品，我忙里偷闲赶紧来更新一下。响应式布局几乎是现在网页设计的标配，能在不同的屏幕宽度下显示不同的效果，而不用准备不同的...

以前没发现background-clip还有一个-webkit-的私有属性：text，可以实现文字背景，结合渐变，可以实现很棒的文字背景无缝滚动。这里案例是很早以前就做的齿轮旋转动画案例，今天才放上来...

在ofo和摩拜两大单车阵营中，我是ofo一派的，最直接的原因就是它家押金比摩拜少，我当时交了99元押金，然后在支付宝花了9.9买了一个包月包，结果根本没用上，因为ofo不是免费骑，就是不停地发抵用券，...

在css2中，如果要实现报纸杂志等平面设计中的多列布局是比较困难的，在CSS3中，增加了columns多列布局，可以轻松实现报纸风格类的多列排版，特别适合宽屏幕下的文章布局。查看案例案例下载↓链接：h...

每天看优设、站酷、UI中国的时间已经多过了前端网的时间了，难道我要转行UI吗？虽然我挺喜欢UI的，可是我还是恋恋不舍我的前端，总觉得自己用代码来表现效果更顺手呢。仿了一个UI中国的头部导航，但是改变了...

比起上一个弹跳的小球动画，我觉得这个变色龙动画更炫酷一些，当时看到百度这个效果的时候也是感到非常棒，于是自己仿做了一个案例，素材来自于百度浏览器产品发布页。查看效果下载地址↓链接：http://pan...

平时喜欢逛各大网站的专题版面，或者产品发布页面，因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面，以及下一个案例“变色龙动画”都是来自于百度浏览器，虽然我是谷歌浏览器的忠实用户...

在早期做下拉菜单的时候，因为IE6不支持li:hover这样的用法，导致必须要用一段JavaScript才能兼容IE6。但是现在随着浏览器的革新和技术的发展，已经可以不用考虑这个兼容性了，因为IE7以...

在几年前，如果想在网页中添加阴影或者圆角等效果，都必须使用png图片才能完成。 CSS3提供的box-shadow、text-shadow、border-radius等属性，...

这个案例的素材来自于htmleaf，要实现这个效果有好几种方法，在这里为了表现出CSS3的多重背景，以及可以用background-position做动画，选用了这种方法。查看效果下载地址链接: ht...

利用CSS3提供的伪类选择器，特别是子元素选择器nth-child，作出斑马条纹的表格再也不是难事了，而且利用nth-child(αn+β)这样的表达式可以实现分组的效果，棒呆！查看效果下载地址链接:...

仿360安全卫士首屏这个案例主要是利用多重背景和通过背景定位（css sprite）完成按钮的变化效果。布局上主要是相对和绝对定位。结合一点animation和transition动画效果完成。其中有...

查看效果 下载地址 链接: https://pan.baidu.com/s/1i4JQpzn 密码: 78mj 一...

文字排版是网页布局里面需要掌握的第一种技能。该案例主要涉及以下几个知识点：1、标题导入外部字体2、首行首字文字变大3、段落两端对齐具体效果如图：查看效果下载地址↓链接: https://pan.bai...