css3宽度变⼤动画_CSS3—新增属性（⼀）⼀、边框圆⾓
border-radius属性，值可以是⼀个px为单位的数值，也可以是%为单位的百分⽐数值。
· 属性名：border-r adius
· 作⽤：设置边框的圆⾓。
· 属性值：可以是像素值，或者百分⽐，百分⽐参考的是盒⼦整体宽度、⾼度的百分⽐。
单⼀属性
· border-top-left-radius: 半径;
· border-top-right-radius: 半径;
· border-bottom-right-radius: 半径;
· border-bottom-left-radius: 半径;
简写⽅法
· border-radius 相当于四个单⼀属性的简写⽅法，类似 padding 也可以有四种值的写
法。
js控制css3动画触发· border-radius: 左上⾓ 右上⾓ 右下⾓ 左下⾓;
· border-radius: 左上⾓ 右上⾓和左下⾓ 右下⾓ ;
· border-radius: 左上⾓和右下⾓ 右上⾓和左下⾓ ;
· border-radius: 四个⾓相同;
/ 的属性值写法
· border-radius 属性值中出现了 / 斜线，那么 / 前⾯可以设置⽔平⽅向四种值的写法，/
后⾯可以设置垂直⽅向四种值的写法。
如果border-radius⾜够⼤，是宽度、⾼度的⼀半，就是正圆。
浏览器兼容
· Internet Explorer 8 及以下版本浏览器不⽀持border-radius属性，其他浏览器都⽀持。
⼆、⽂字阴影
· 在 CSS3 中，text-shadow 可向⽂本应⽤阴影。通过属性值能够规定⽔平阴影、垂直阴
影、模糊距离，以及阴影的颜⾊：
⽂字阴影语法
text-shadow 属性向⽂本添加阴影，属性值有2-3个长度值和⼀个可选的颜⾊值进⾏ 规定，省略的长度是 0。
多层阴影
text-shadow 属性也可以向⽂本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。
三、盒⼦阴影
· 在 CSS3 中，box-shadow 属性⽤于对盒⼦边框添加阴影。
边框阴影语法
box-shadow 属性向盒⼦添加阴影，属性值有2-4 个长度值、可选的颜⾊值以及可选 的 inset 关键词来规定，省略的长度是 0。
多层阴影
box-shadow 属性也可以向盒⼦添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。
四、过渡属性
动画效果
· CSS3 出现之前，前端⼀般使⽤ Flash 动画或 JavaScript 制作动画。
· 帧动画：通过⼀帧⼀帧的画⾯按照固定顺序和速度播放，如电影胶⽚。
过渡属性
属性名：transition
作⽤：在不使⽤ Flash 动画或 JavaScript 的情况下，使⽤ transition 可以实现补间动画
（过渡效果），并且当前元素只要有“属性”发⽣变化时即存在两种状态(我们⽤A和B
代指），那么A和B之间就可以实 现平滑的过渡的动画效果。为了⽅便看效果，我们
使⽤ :hover 切换状态。
语法格式：
单⼀属性写法
transition-property 过渡的属性
· none 表⽰没有属性过渡
· all 表⽰所有变化的属性都过渡
· 属性名 使⽤具体的属性名，多个属性名中间逗号分隔transition-duration 过渡花费时间
· 过渡时间：以s秒为单位。
· 延时时间：以s秒为单位。0s也必须加单位。transition-timing-function 时间曲线
规定过渡效果的时间曲线，默认是 "ease"
贝塞尔曲线
transition-delay 过渡延时
规定过渡效果何时开始，默认是 0
使⽤注意：
1）如果想要所有的属性都变化过渡，写⼀个all 就可以
2）transition-duration 花费时间单位是秒 s ⽐如 0.5s 这个s单位必须写
什么属性能过渡
能过渡：background-color、background-position、background-image、border-radius、border、 基本所有属性都 能过渡
不能过渡的：渐变⾊、float
padding、font-size等等。 不能过渡的
尤其要注意的是， jQuery中的animate函数，不⽀持background-color、background-position。 所以，如果想要制作背景颜⾊、背景定位的动画，必须使⽤CSS3。
什么时候触发过渡
任何对元素的CSS改变都能触发过渡。 不要认为只有:hover能够触发过渡。任何造成元素的改变，都会引发过渡。 ⽐如元素的类名改变，能够触发过渡。 ⽐如直接⽤JS来设置属性，也能够触发过渡。
transition就像护⾝符⼀样，任何⼈胆敢改我的css样式，⼀定是动画实现的。并且动画效率⽐setInterval还⾼。 ⽤过渡来实现动画，早晚有⼀天要替代setInterval()原理。
浏览器兼容
· Internet Explorer 10、Firefox、Chrome 以及 Opera ⽀持 transition 属性。
· Safari 需要前缀 -webkit-。
· 注意：Internet Explorer 9 以及更早的版本，不⽀持 transition 属性。
五、background系列

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。