css3中的动画 @keyframes animation

动画的运用比较重要。接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法。

  创建一个动画:

    @keyframes 动画名 {样式}

  引用自己创建的动画

    animation:动画名  时长(执行多长时间)  效果  开始时间(多久之后开始);

          其中 效果 开始时间是可以省略的。

  举个栗子:div获得鼠标焦点时会改变宽度

 <div class="dh1"></div>

 <style>
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*创建一个动画myDongHua1 内容是在不同时间段改变div的宽度*/
@keyframes myDongHua1 {
0%{width: 300px;}
50%{width: 200px;}
100%{width: 600px;}
}
/*调用动画效果 animation: 动画名 执行时间长度;*/
.dh1:hover{
animation:myDongHua1 1s;
}
</style>

  再举个栗子:当div获得鼠标焦点时 颜色会从yellow变成blue

    

 <div class="dh2"></div>

 <style>
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*创建一个动画myDongHua2 内容是分阶段改变div颜色*/
@keyframes myDongHua2{
from{background:yellow;}
to{background:blue;}
}
/*调用动画效果 animation: 动画名 执行时间长度;*/
.dh2:hover{
animation:myDongHua2 3s;
}
</style>

  

  再再举个栗子:当div获得鼠标焦点会出发 CD的旋转动画效果

 <div class="CDtum">
<img src="img/cd.png" alt=""/> <!--此处引入一个CD的圆形图片-->
</div> <style> /*cd旋转实例*/
.CDtum{
width: 200px;
height: 200px;
}
.CDtum img{
width: 200px;
height: 200px;
border-radius: 100%;
}
/*设置动画从0度旋转到360度*/
@keyframes CDtum{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/*调用动画 3秒内完成 linear:匀速 3表示只进行三次动画 可以用infinite 来无限执行*/
.CDtum img:hover{
animation:CDtum 3s linear 3 ;
}
</style>
上一篇:CentOS安装postgresql 9.4


下一篇:Linux正則表達式-反复出现的字符