css动画个人笔记

1.’制作红色边框会旋转的圆圈：

<div class="login">
<div class="login-one"></div>
<p>loading</p>
</div>

css:

注意：移动文字最好使用定位position：absolute；

2.如何让下图的背景图片变成五个有动画特效的圆：

编写li标签：

<div class="start">
<ul>
<li class="start-one"></li>
<li class="start-two"></li>
<li class="start-three"></li>
<li class="start-four"></li>
<li class="start-five"></li>
</ul>
</div>

css中插入图片，宽高，设置定位background-position：

设置动画：

注意：背景图片需写在相应的li的class里，不能直接写在li里，否则显示不出来。

3.会缩放的小线条：

首先设置6个div：

<div class="music">
<div class="music-one"></div>
<div class="music-two"></div>
<div class="music-three"></div>
<div class="music-four"></div>
<div class="music-five"></div>
</div>

css里设置如下：

注意：scale:缩放。最小值0-1，最大值取大于一之上。