CSS3效果总结

现在，界面效果越来越丰富，对CSS3的掌握显得尤为重要。所以把CSS3的一些效果，特别是动画效果做一个总结，可以时常拿来翻看。

 

一、CSS3边框

border-radius;设置圆角边框

box-shadow: h-shadow v-shadow blur spread color inset;设置边框阴影

二、CSS3背景

background-size;设置背景图片的尺寸

background-origin;设置背景图片的定位区域

三、CSS3文本效果

text-shadow；向文本应用阴影

word-wrap;自动换行

四、CSS3转换

transform：1、translate（）元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数；

　　　　　　2、rotate（）元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转；

　　　　　　3、scale（）元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数；

　　　　　　4、skew（）元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数；

　　　　　　5、matrix（）需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

五、CSS3过渡

transition：property duration timing-function delay;元素从一种样式逐渐改变为另一种的效果

六、CSS3动画

　　　　　　1、@keyframes规则：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

　　　　　　2、animation：name duration  timing-function delay iteration-count direction 设置六个动画属性 

　

以上，大致列出了CSS3常用的一些属性，具体使用规则可上w3c手册去查询。

转载于:https://www.cnblogs.com/p10914119/p/6668754.html