CSS3习题3（不停旋转的图片）

Posted 2021-04-09 书软

这节课我们继续说之前留下的4道习题，这节课来说第三道题，做一个不停旋转的图片。

说道不停旋转，首先我们想到开发中，是用来做等待加载的loading图片的，当页面有内容加载比较浪费时间，我们加一个不停旋转的等待图片，让用户不至于等待的很焦急，可以给用户一个等待的过程。

之前的做法一直都是做一张gif图片，gif本来就是用来做动态图片的，所以可以出现一直旋转的效果。

就好比这张图片，这就是一张gif动图。但是gif有个缺点，就是比普通静态图片体积要大，浪费资源。所以我们提了一个问题，怎么让一张静态图片一直旋转，这就是目的之所在。

--------------------------

1、准备一张静态图片 xz.png 放到我们的img目录下

-----------------------

2、在html代码中引入图片，注意这里是一张静态的png图片

                <div>

<img class="rotate_img" />

    </div>

-----------------------

3、编写css部分

<style type="text/css">

.rotate_img{width:40px;height:40px;

    animation:loadmove 0.8s infinite;

    animation-fill-mode: forwards;

}

@keyframes loadmove{

    100% {transform: rotate(360deg);}

}

</style>

-----------------------------------------

4、css解析

自己把代码看一看，照着敲两遍，这里主要是用到了animation动画。之前已经让大家看过知识点了，animation 冒号后面传入的是 动画方法名，动画速度动画执行次数。最好的理解办法就是把代码写出来，然后改一改其中的参数，分别看看改过之后会出现什么效果，这样印象会加深。@keyframes 再加上之前的方法名，里面再执行要动到什么效果。 animation-fill-mode: forwards; 是告诉我们，当一次动画执行结束后，恢复到最初的效果继续执行。大家可以试着不加这一行代码，然后查看一下效果。

还是那句话，代码一定要不断的写，而不是只是看。公司要得是写代码的，不是看代码的。