一半设计一半前端
鹤望岚
首页
前端教程
HTML教程
CSS教程
JavaScript教程
jQuery教程
界面设计
案例集
zblog建站
前端资源
工具
书籍
酷站推荐
杂谈
关于我
文章归档
导航菜单
首页
前端教程
HTML教程
CSS教程
JavaScript教程
jQuery教程
界面设计
案例集
zblog建站
前端资源
工具
书籍
酷站推荐
杂谈
关于我
文章归档
关于"CSS3案例集"的文章
案例集
steps animation,极光下奔跑的熊!
有次无意间看到了百度浏览器的动画效果,一直恋恋不忘,终于抽了点空仿了一个场景,感觉steps animation逐帧动画还是很强大呀。点击查看效果一、案例分析1、星空背景的运动和三层山的运动需要掌握背...
2018年06月22日
2646
案例集
利用transform变形结合事件完成扇形导航
这个案例因为写错了一个transition的单词,害得我花了一个下午的时间,真的眼睛都瞎了,以后不要再犯这种低级错误 >_<查看效果案例源代码下载链接: https://pan...
2018年05月25日
2610
案例集
利用transform打造走动的2D时钟
学完了transform这个课程,还是来一个案例吧,利用transform的旋转rotate打造一个时钟,再结合JavaScript的定时器让它走起来。截一个动图:点击查看效果源文件下载↓链接: ht...
2018年05月15日
2645
案例集
仿腾讯专题页,实现3D旋转效果
这个专题页我挺喜欢的,就在上课的时候简单的仿制了一下,不过没有设置video和图片的切换,直接用了图片,算是阉割版了。下面的3D旋转使用了不同的方式,把图片也包括进去了,原始版本是只有边框旋转,图片不...
2018年01月30日
2949
案例集
CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)
一个月的ps基础课程教学终于结束,网站也好久没有更新了,今天学生们准备项目汇报的作品,我忙里偷闲赶紧来更新一下。响应式布局几乎是现在网页设计的标配,能在不同的屏幕宽度下显示不同的效果,而不用准备不同的...
2018年01月30日
2820
案例集
css3渐变文字动画和齿轮旋转动画
以前没发现background-clip还有一个-webkit-的私有属性:text,可以实现文字背景,结合渐变,可以实现很棒的文字背景无缝滚动。这里案例是很早以前就做的齿轮旋转动画案例,今天才放上来...
2018年01月30日
3096
案例集
CSS3案例集13:改版ofo小黄车官网响应式布局
在ofo和摩拜两大单车阵营中,我是ofo一派的,最直接的原因就是它家押金比摩拜少,我当时交了99元押金,然后在支付宝花了9.9买了一个包月包,结果根本没用上,因为ofo不是免费骑,就是不停地发抵用券,...
2017年10月23日
2972
案例集
CSS3案例集11:columns多列实现报纸排版效果
在css2中,如果要实现报纸杂志等平面设计中的多列布局是比较困难的,在CSS3中,增加了columns多列布局,可以轻松实现报纸风格类的多列排版,特别适合宽屏幕下的文章布局。查看案例案例下载↓链接:h...
2017年09月26日
2988
案例集
CSS3案例集10:仿UI中国头部导航效果
每天看优设、站酷、UI中国的时间已经多过了前端网的时间了,难道我要转行UI吗?虽然我挺喜欢UI的,可是我还是恋恋不舍我的前端,总觉得自己用代码来表现效果更顺手呢。仿了一个UI中国的头部导航,但是改变了...
2017年09月15日
2401
案例集
CSS3案例集09:五光十色的变色龙动画
比起上一个弹跳的小球动画,我觉得这个变色龙动画更炫酷一些,当时看到百度这个效果的时候也是感到非常棒,于是自己仿做了一个案例,素材来自于百度浏览器产品发布页。查看效果下载地址↓链接:http://pan...
2017年09月14日
3355
案例集
CSS3案例集08:弹跳的小球动画
平时喜欢逛各大网站的专题版面,或者产品发布页面,因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面,以及下一个案例“变色龙动画”都是来自于百度浏览器,虽然我是谷歌浏览器的忠实用户...
2017年09月13日
2778
案例集
CSS3案例集07:纯CSS3水平导航下拉动画菜单
在早期做下拉菜单的时候,因为IE6不支持li:hover这样的用法,导致必须要用一段JavaScript才能兼容IE6。但是现在随着浏览器的革新和技术的发展,已经可以不用考虑这个兼容性了,因为IE7以...
2017年09月11日
2261
案例集
CSS3案例集06:纯CSS3绘制卡通风景画
在几年前,如果想在网页中添加阴影或者圆角等效果,都必须使用png图片才能完成。 CSS3提供的box-shadow、text-shadow、border-radius等属性,...
2017年09月08日
4171
案例集
CSS3案例集05:飘动的云和热气球
这个案例的素材来自于htmleaf,要实现这个效果有好几种方法,在这里为了表现出CSS3的多重背景,以及可以用background-position做动画,选用了这种方法。查看效果下载地址链接: ht...
2017年09月07日
2368
案例集
CSS3案例集04:斑马条纹的渐变圆角表格
利用CSS3提供的伪类选择器,特别是子元素选择器nth-child,作出斑马条纹的表格再也不是难事了,而且利用nth-child(αn+β)这样的表达式可以实现分组的效果,棒呆!查看效果下载地址链接:...
2017年09月06日
2287
案例集
CSS3案例集03:仿360安全卫士首屏
仿360安全卫士首屏这个案例主要是利用多重背景和通过背景定位(css sprite)完成按钮的变化效果。布局上主要是相对和绝对定位。结合一点animation和transition动画效果完成。其中有...
2017年09月05日
2187
案例集
CSS3案例集02:漂亮的人像相册集
查看效果 下载地址 链接: https://pan.baidu.com/s/1i4JQpzn 密码: 78mj 一...
2017年09月04日
2238
案例集
CSS3案例集01:加载外部字体和文字排版
文字排版是网页布局里面需要掌握的第一种技能。该案例主要涉及以下几个知识点:1、标题导入外部字体2、首行首字文字变大3、段落两端对齐具体效果如图:查看效果下载地址↓链接: https://pan.bai...
2017年09月01日
4181
‹‹
1
››