首先还是先创建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>
这样三个的动画就写完了,这个简单的加载动画也就写完了。最后效果是: