如何用伪类控制CSS3动画运动进程

开发工具与关键技术：DW与CSS3
作者：刘华叶
撰写时间：2019年1月19号

CSS3动画是很有趣的代码，可以做出多种动画效果，效果如何，就要看你怎么利用它的属性了，下面我就跟大家分享一下这个如何用伪类控制CSS3动画运动进程。

一． HTML代码如下：

这个HTML代码很少，设置个盒子就行了。

二．CSS3代码如下：

首先给它设置一个@keyframes（关键帧）和动画名称,然后在设置开始的圆角效果为0%，结束的时候为50%。再给它设置一个宽，高，还有动画播放时间，再引入一张图片，设置一个属性，让它适应图片大小，再居中，然后在设置动画播放时间，匀速运动和无限循环，
后面再设置一个伪类，也是设置一个旋转后的盒子，在设置一个动画播放状态和动画旋转。

从图片中可以看出这个图自己在不断的变化，直到变成一个圆，它自己又会自动张开，恢复原来的样子，不断的循环。

当我把鼠标移入进去它会旋转放大，变成一个四方形，鼠标移出后就又恢复成原来的样子，网页到这里就结束了，希望对大家有所帮助。