首先还是先创建HTML文件
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>这里由于我要使用三个快元素，所以我创建了三个div，当然，你需要几个就可以建几个。
我们的需求是一个加载动画，所以一般情况下是需要转动的，圆形转动是最常见的，因此我们选择用圆形来搭建这个动画。由于要加载，用一个圆转是很单调的，也不易于欣赏，因此选择用三个圆来搭建。接下来把HTML中的三个div用css渲染成我们需要的样子。
接着创建css文件
<style>
div.one{
width:200px;
height:200px;
border-radius:50%;
border:2px solid orange;
}
div{
width:150px;
height:150px;
border-radius:50%;
border:2px solid purple;
}
div{
width:100px;
height:100px;
border-radius:50%;
background-color:white;
}
</style>写到这发现啥了没？是不是每个div都有border-radius：50%，这就是将块元素，当然要宽高一样的块元素变成圆的代码；为了咱们的效果，所以前两个我们选用他们的边框，最里面的选用它本身。为什么最里面的div是要设置成白色呢？因为我们的效果一般都不是在纯白的页面用的，因此设置成白色也无所谓，当然你可以设置成喜欢的颜色。紧接着我们发现，这三个圆都在左上角显示，一环套一环，没关系，这儿只需要加一个绝对定位并让他们居中就好了。把body的背景颜色换成黑色，让效果更明显。
<style>
.one,.two,.three{
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:auto;
}
body{
background-color:black;
}
</style>这样大体框架就搭好了，接着，我们发现最外面的两个div选用1/4的话效果比较好，因此我们给他们两加样式，让他们变得更美观。
<style>
div.one,div.two{
border-top:2px solid black;
border-bottom:2px solid black;
border-right:2px solid black;
}
</style>为什么要这么写而不是直接让border-left:2px solid orange；因为这样写下来你会发现这个1/4的圆从中间渐渐缩小，这样效果不好，因此我们选择先让他们都有边框，再让上右下的颜色和屏幕背景颜色一样，这样我们看到的就是1/4的宽度相同的一个圆弧。这个样式一定要写在div.one和div.two之后，这样他们才能发挥效用。接着就该写动画了。
动画制作
这次是让三个圆转动，但第一个和第二个都是边框看效果，因此我们可以将第一个和第二个动画只写一个，可以让他两同时转也可以让他两分开转，也就是有差异的转，只需要修改转一圈所需要的时间即可。动画代码如下：
<style>
@keyframes one{
0%{
transform:rotateZ(0deg);
}
100%{
transform:rotateZ(360deg);
}
}
@keyframes three{
0%{
transform:scale(1,1);
}
100%{
transform:scale(0.1,0.1);
}
}
</style>前两个div我们让他旋转，最里面的div.three我们让他缩小放大。
<style>
.one{
animation:one 2s linear infinite;
}
.two{
animation:one 4s linear infinite;
.three{
animation:three 0.5s ease-in infinite alternate;
}
</style>这样三个的动画就写完了，这个简单的加载动画也就写完了。最后效果是：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
