CSS3哪些新特性值得称赞

html-css012

CSS3哪些新特性值得称赞,第1张

简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。

1、CSS进行渐变背影的设置,在background中添加了linear-gradient线性渐变,

background: linear-gradient(yellow 0%, #000 80%)/*从0%黄色到80%黑色的渐变*/

2、CSS 3D

perspective:查看视图的位置,如拍照时的镜头位置一样。

transform-style中preserve-3d,设置了此属性时,将子元素包裹在一个3D视图里。

3、CSS animation

说到动画就不得不说jQuery的animation。但有了CSS3后就再也不用JS进行制作动画了。

keyframes定义帧动画,可根据百分比进行设置,也可利用from和to的方式进行设置。

利用animation引用定义好的keyframes帧动画。animation:rotate 20s infinite linear/*设置引用的动画,动画时间,动画的timing-function,动画方式*/

4、CSS filter

fileter并非IE的过滤器,是CSS3中新添加的属性。

包含效果有:grayscale灰度,sepia褐色,saturate饱和度,hue-rotate色相旋转,invert反色,opacity透明度,brightness亮度,contrast对比度,blur模糊,drop-shadow阴影.

挤压效果就是利用filter中的blur加saturate混合而来

CSS3的动画的优点:

1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)

2.代码相对简单

但其缺点也很明显:

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现(如滚动动画,视差滚动等)

JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧。

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

扩展资料:

工作原理

CSS3原理同CSS,是在网页中自定义样式表的选择符,然后在网页中大量引用这些选择符[29]。

新增特性中transform的原理较为特殊,虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形,但是变形中的矩阵函数都可以使用matrix()函数来代替。

新增特性

CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

参考资料:百度百科-css3