简单的css动画-加载时的圆形滚动条

目录

一，加载时候的圆形滚动条效果

 二，html代码结构与css样式设置

1.盒子设置

2.圆点们的定位

 三，动画的实现

1.定义动画规则

2.设置动画延时播放

3.最后优化

四，另一种麻烦的办法

---

一，加载时候的圆形滚动条效果

我们在播放视频，在视频的加载中，经常出现一个圆点组成的圆形滚动条的加载效果，如下图。今天我们就尝试使用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（圆点），分别为其设置宽高样式，圆角边框，背景颜色使其清晰可见，再使用