有趣的HTML5 CSS3效果

本文介绍了使用CSS3进行网页设计的技巧与实践案例,包括如何实现圆角、阴影、旋转和动画效果,以及如何利用:before和:after伪元素进行精准定位。

iphone6 外观:http://www.html5tricks.com/demo/css3-iphone6/index.html

天气图标:http://www.html5tricks.com/demo/pure-css3-weather-icon/index.html

3D太空船:http://www.html5tricks.com/demo/pure-css3-3d-air-ship/index.html

动态字体:http://www.html5tricks.com/demo/html5-canvas-side-text/index.html

 

个人思考:

 CSS3纯图片
优点

1、加载速度快

2、放大不失真

1、制作简单

2、开发速度快

缺点

1、技能要求高

2、开发时间长

1、大图加载速度慢

 

 

 

 

 

 

 

 

CSS3、HTML5实践:

在页面上的图形一般用两种方法,用CSS3或者canvas绘画

以下是CSS3的一些想法

1 一般比较多的会用到圆角,阴影,旋转和动画,

2 有三角图案的时候一般都会用到width:0;height:0;然后设置边框的粗细,弧度都是通过border-radious绘制

3 定位来说一般都会是绝对的absoulate,还有:before,after

转载于:https://www.cnblogs.com/huangxiaowen/p/4040868.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值