目录
一,加载时候的圆形滚动条效果
我们在播放视频,在视频的加载中,经常出现一个圆点组成的圆形滚动条的加载效果,如下图。今天我们就尝试使用css的动画效果来实现这个效果。
分析下图,是八个圆点组成这个图像,八个圆点依次缩放大小,就可以实现这个动画效果。
二,html代码结构与css样式设置
1.盒子设置
由上分析,那么我们使用两个div分别嵌套四个div。
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="box2">
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
然后我们为box1,box2设置各种样式,设置边框使其轮廓清晰可见,用绝对定位使其重叠在一起,然后为box2设置旋转45度。
效果与代码如下。
* {
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height: 300px;
border: 1px solid black;
position: absolute;
top: 200px;
left:600px;
}
.box2{
width: 300px;
height: 300px;
border: 1px solid black;
position: absolute;
top: 200px;
left: 600px;
transform: rotate(45deg);
}
2.圆点们的定位
box中的四个div(圆点),分别为其设置宽高样式,圆角边框,背景颜色使其清晰可见,再使用绝对定位,一个一个的将其定位在正方形大盒