缓冲的小球

最新推荐文章于 2021-02-25 12:16:56 发布

sinat_33441740

最新推荐文章于 2021-02-25 12:16:56 发布

阅读量329

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/sinat_33441740/article/details/52299631

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

每当我们打开一个页面的时候，如果网速不好，经常会看到缓冲的页面（旋转的小球），我们今天就来说一说“缓冲的小球”用Html是怎么生成的。

所需知识点：

1.定位
2.动画@keyframes

总体思路

我们想让几个小球围绕一个中心旋转，可是如果每个小球自己旋转，它不会围绕一个中心点，于是我们就想到让每个小球放在一个div（几个div块用定位放在一起）块中，让div块旋转，效果就可以实现了。

具体步骤

1.用6个div，每个div放一个小球（切圆角），具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        .div_1,.div_2,.div_3,.div_4,.div_5,.div_6 {
                width: 200px;
                height: 200px;
                position: absolute;
                top:250px;
                left:500px; 
            }
        .dian {
            width: 15px;
            height: 15px;
            position: absolute;
            background: black;
            top: 0px;
            left:100px;
            border-radius: 50%;
          }

    </style>
</head>
<body>
    <div class="div_1">
        <div class="dian"></div>
    </div>
    <div class="div_2">
        <div class="dian"></div>
    </div>
    <div class="div_3">
        <div class="dian"></div>
    </div>
    <div class="div_4">
        <div class="dian"></div>
    </div>
    <div class="div_5">
        <div class="dian"></div>
    </div>
    <div class="div_6">
        <div class="dian"></div>
    </div>
</body>
</html>

效果如下图所示（六个小球用定位重叠在一起）
这里写图片描述

2.用动画进行旋转

2.1、声明动画


        @-webkit-keyframes change {
            0% {
                transform:rotate(0deg);
            }
            100% {
                transform:rotate(720deg);
            }
        }

2.2、调用动画

.div_1 {
               animation:change 10s linear 0.5s 1 normal backwards;
        }
        .div_2{
                animation:change 10s linear 1s 1 normal backwards;
            }
        .div_3 {
                animation:change 10s linear 1.5s 1 normal backwards;
            }
        .div_4 {
                animation:change 10s linear 2s 1 normal backwards;
            }
        .div_5 {
                animation:change 10s linear 2.5s 1 normal backwards;
            }
        .div_6 {
                animation:change 10s linear 3s 1 normal backwards;
            }
        }