例子---纯CSS实现加载球

最新推荐文章于 2024-03-10 00:43:11 发布

TimePawnshop.

最新推荐文章于 2024-03-10 00:43:11 发布

阅读量2.2k

点赞数

分类专栏： CSS和HTML小例子文章标签： CSS 加载球完整代码

本文链接：https://blog.csdn.net/MYTLJP/article/details/78303701

版权

CSS和HTML小例子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小伙伴们看到那些页面上炫酷的加载球，是不是都觉得美美的很精致，很想自己动手写一个属于自己的加载球，但是又学业繁忙而找不到时间去实现呢，哈哈，那今天我就为大家写一个，哒哒哒，废话不多说，开始上代码~
额，要不先说说它的实现原理吧，方便理解，嘿嘿。
实现原理：大体上就是巧妙的运用了伪类元素before和after达到目的的。其实就是在一个div上面设置了两个伪类空元素，宽高一样，但是其他样式不一样，然后再结合@keyframes/animation和对背景透明色rgba的巧妙运用，达到了视觉上加载球一点点圆满的效果。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>加载球</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            margin: 400px auto;
            /*border: 1px solid black;*/
        }
        .wave{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
            position: relative;
        }
        .wave::before,.wave::after{
            content: "";
            width: 400px;
            height: 400px;
            position: absolute;
            /*border: 1px solid red;*/
            top: -100%;
            left: -50%;
        }
        .wave::before{
            background-color: rgba(255,255,255,0.7);
            border-radius: 40%;//这两个伪类的外边框圆角都是经过推敲的，以达到视觉上完美的效果
            animation:10s rotate_before linear infinite;
        }
        .wave::after{
            background-color: rgba(255,255,255,1);
            border-radius: 46%;
            animation:10s rotate_after linear infinite;
        }
        @keyframes rotate_before{
            from{
                transform: translate(0%,0%) rotate(0deg);
            }
            to{
                transform:translate(0%,-60%) rotate(360deg);
            }
        }
        @keyframes rotate_after{
            from{
                transform: translate(0%,0%) rotate(0deg);
            }
            to{
                transform:translate(0%,-60%) rotate(30deg);//这两个的旋转角度也是经过事先过很多次，和上面的圆角配合，才有了很好的视觉效果
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wave"></div>
    </div>
</body>
</html>

效果图如下：

这里写图片描述
我这边是用手机吧MP4格式转成GIF又上传到博文上的，多少有点视觉差，见谅见谅。
小伙伴们要是想看更好的效果的话，可以自己写一下，运行看看，真的很不错啊。另外偷偷的告诉你们写的时候，把伪类设置里面的边框设置打开，玄机就一目了然了哦，哈哈哈~

TimePawnshop.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
例子---纯CSS实现加载球

小伙伴们看到那些页面上炫酷的加载球，是不是都觉得美美的很精致，很想自己动手写一个属于自己的加载球，但是又学业繁忙而找不到时间去实现呢，哈哈，那今天我就为大家写一个，哒哒哒，废话不多说，开始上代码~ 额，要不先说说它的实现原理吧，方便理解，嘿嘿。实现原理：大体上就是巧妙的运用了伪类元素before和after达到目的的。其实就是在一个div上面设置了两个伪类空元素，宽高一样，但是其他样式不一样，
复制链接

扫一扫