通过css样式设置动画，转换，过渡等界面酷炫效果
1.过渡在css3中，有一个属性可以设置过渡效果。它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。A.案例：通过transition设置焦点过渡效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; margin:200px; background: url(girl.jpg); border-radius:50%; transition:all 1s linear 0.3s; cursor: pointer; } div:hover{ box-shadow: 0px 0px 20px blue; } </style></head><body> <div></div></body></html>
代码效果如下：
注意页面中的代码：第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;这四个数据分别对应transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。transition-duration(过渡的时间):以秒作为单位，设置过渡的时间transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。
所以，我们通过transition这个复合属性设置的过渡效果为：all:需要过渡所有的属性1s:过渡的时间为1秒linear:匀速过渡0.3s:在延迟0.3秒之后开始过渡动画。
如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。
2.动画：在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。那么，动画animation就可以满足我们的需要。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes moveAndChange{ 0%{ left:0px; top:0px; } 25%{ left:200px; top:200px; background:green; border-radius: 0; } 50%{ left:400px; top:200px; background:blue; border-radius: 50%; } 75%{ left:400px; top:0px; background:#ccc; border-radius: 0; } 100%{ left:0px; top:0px; background:red; border-radius: 50%; } } div{ margin:200px; width: 200px; height: 200px; position: absolute; background:red; border-radius:50%; animation: moveAndChange 5s linear 0.5s infinite normal; }
</style></head><body> <div></div></body></html>
代码效果如下：
同样，让我们来关注编写的代码：1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：
/*动画的名字叫做moveAndChange*/@keyframes moveAndChange{ /*动画最初的时候，将left设置为0px，top设置为0px*/ 0%{ left:0px; top:0px; } /*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px， 背景颜色过渡为绿色，圆角过渡为0(无圆角)*/ 25%{ left:200px; top:200px; background:green; border-radius: 0; } /*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px， 背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/ 50%{ left:400px; top:200px; background:blue; border-radius: 50%; } /*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0， 背景颜色过渡为灰色，圆角过渡为0(无圆角)*/ 75%{ left:400px; top:0px; background:#ccc; border-radius: 0; } /*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px， 背景颜色过渡为红色，圆角过渡为50%(正圆)*/ 100%{ left:0px; top:0px; background:red; border-radius: 50%; } }
这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。
2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。就是下面这句代码了：animation: moveAndChange 5s linear 0.5s infinite normal;它是一个复合属性，设置了6个值，分别对应：animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是alternate则表示要反向播放动画，大家也可以自己试一试这个效果。
最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。
3.转换在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：A.平移
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:pink; } div{ width: 200px; height: 200px; position: absolute; background: green; left:0px; top:0px; transform: translate(300px,300px); } </style></head><body> <div></div></body></html>
代码效果如下：
如上图所示，本来div盒子的位置是left:0,top:0;但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。
B.旋转
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: pink; } div { width: 200px; height: 200px; margin: 200px; position: absolute; background: green; left: 0px; top: 0px; transform: rotate(45deg); } </style></head><body> <div></div></body></html>
代码效果如下：
如上图所示，本来div盒子应该是四四方方的。但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。
C.缩放
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: pink; } div { width: 200px; height: 200px; margin: 200px; position: absolute; background: green; left: 0px; top: 0px; transform: scale(0.5,0.25); } </style></head><body> <div></div></body></html>
代码效果如下：
如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放scale的第一个参数为0.5,表示横向缩小为0.5倍scale的第二个参数为0.25，表示纵向缩小为0.25倍。scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。
小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。
上一篇：CSS浏览器兼容性？