0 0 6 1 - “拖尾”Loading动画 - 1.0

不二如是 · 发表于 2017-3-2 15:35:02

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:37 编辑

在60我们制作了一个很单纯的加载图标。

现在介绍一个效果更棒的加载特效“拖尾”。

主要利用linear-gradient线性渐变来设置。

好吧，先把定义扔出来，你肯定看不懂！

只是想说明一个观点：

实践永远比套路更实用！

顺便在推荐一篇好的吹水文：002d - 请像“鲨鱼”一样，一直游下去

框架和60一样，但要把之前的设置删除掉哦～

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        body{
            background: #000;
            margin: 100px;
        }
    .load{  }
        .load::before{ }

        .load::after{ }
    </style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

修改.load

.load{
        text-indent: -9999px;
        position: relative;
        width: 202px;
        height: 202px;
        box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
        border-radius: 50%;
                background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
    }

重新将box-shadow设置内部阴影为20px宽，颜色30%白色透明度。

设置linear-gradient的方向为从左到右。

从右侧向左11%区域为白色，再向左到50%的位置渐变为完全透明的白色。

运用之前绘制半圆的经验，使用before伪元素来绘制1/4圆，来模仿“拖尾”。

功能还是“魔术板”。

由于渐变颜色上下一样，所以右下角，右上角都行。

考虑个人比较喜欢“下”的姿势

，就右下角吧

 .load::before{
            position: absolute;
            content: '';
            width: 50%;
            height: 50%;
            background: #FFF;
            border-radius: 0 0 101px 0;
            right: 0px;
            bottom: 0px;
        }

效果图：

先通过border-radius生成一个上、右、左为0px，下为101px宽的1/4圆。

如果border-radius不太熟悉，请看实用 - Tips - 7 - border-radius 详解

位置就在右下角，所以right、bottom为0px。

添加after伪元素，绘制一个内部实心圆，将其他细节覆盖掉。

      .load::after{
            position: absolute;
            background: #000;
            width: 162px;
            height: 162px;
            border-radius: 50%;
            content:'';
            top: 20px;
            left: 20px;

        }

效果图：

看到了不，可爱的渐变圈就出来了～

大圆直径为202px，轨迹环20px宽，所以中心区域就是：

202 - 20 = 182px

恭喜你，答错了！

轨迹圈，应该是两边都算上，202 - 20*2 = 162px，Bingo！

现在只要旋转起来就行了，这个还是老办法

@keyframes load-effect {
            0% {
                
                transform: rotate(0deg);
            }
            100% {
                
                transform: rotate(360deg);
            }
            }
 .load{
      /*其他*/
        animation: load-effect 2s infinite linear;
    }

效果图：

哇塞，有没有B格一下就很高呢？！

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

宇航 · 发表于 2017-3-2 16:52:50

alltolove · 发表于 2017-3-3 19:47:00

哈哈！你今天发的帖子也没啦

不二如是 · 发表于 2017-3-3 21:26:32

alltolove 发表于 2017-3-3 19:47
哈哈！你今天发的帖子也没啦

哈哈，版本恢复到昨天晚上了

明天穿越时空吧

alltolove · 发表于 2017-3-3 21:53:19

不二如是发表于 2017-3-3 21:26
哈哈，版本恢复到昨天晚上了

明天穿越时空吧

我晕，提醒的bug又回来了

不二如是 · 发表于 2017-3-3 22:36:23

alltolove 发表于 2017-3-3 21:53
我晕，提醒的bug又回来了

正在慢慢修改…

一步一步来吧

会魔法的魔法 · 发表于 2017-4-2 16:12:44

.load{
      text-indent: -9999px;
      position: relative;
      width: 202px;
      height: 202px;
      box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
      border-radius: 50%;
            background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
}

      box-shadow: inset 0 0 0 20px rgba(255,255,255.3);

255.3

这里少了个逗号

aswyamato1989 · 发表于 2017-8-4 09:28:39

交作业！

aswyamato1989 · 发表于 2017-8-4 09:29:46

交作业

aswyamato1989 · 发表于 2017-8-4 09:31:23

另外有一个疑问：

animation: load-effect 2s infinite linear;

这条语句，添加在.load{}中了，那么可不可以这样理解：
.load，.load::before和.load::after三个元素都会执行此动画效果呢？

爱学习的懒懒君 · 发表于 2018-10-6 11:06:52

最后只为.load添加动画效果是不是属于事件的捕获，我看为.load外面加一层元素，只给它添加动画效果，子元素.load也跟着转

chmmoon · 发表于 2018-10-17 18:41:08

为啥页面的滚动条会跟着动咧？

你在意在便在 · 发表于 2019-11-6 20:43:44

自己竟然慢这个程度了~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
/* 清除样式 样式位置 */
* {
        margin:0;
        padding:0;
}
body {
        background: #000;
        margin:100px;
}
/* 最底层 */
.load {
        text-indent: -9999px;
        position:relative;
        width: 200px;
        height: 200px;
        box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
        background: linear-gradient(to left,
                rgba(255,255,255) 11%,
                rgba(255,255,255,0) 50%
        );
        border-radius: 50%;
}
/*中间层*/
.load::before {
        content:'';
        position:absolute;
        width: 100px;
        height: 200px;
        /* 渐变色开始和颜色和最底层背景颜色相同 实现重合 */
        background:  linear-gradient(180deg,
                rgba(255,255,255,0) 11%,
                rgba(198,255,221) 30%,
                rgba(251,215,134) 50%,
                rgba(247,121,125) 90%
        );
        border-radius:0 100px 100px 0;
        left: 100px;
}
/* 最顶层 覆盖中心多余部分 */
.load::after {
        content: '';
        position: absolute;
        width: 170px;
        height: 170px;
        background: #000;
        border-radius: 50%;
        left: 15px;
        bottom: 15px;
}
/*设置动画*/
@keyframes flash{
        0% {
                transform: rotate(0deg);
        }
        25% {
                transform: rotate(90deg);
        }
        50% {
                transform: rotate(180deg);
        }
        75% {
                transform: rotate(270deg);
        }
        100% {
                transform: rotate(360deg);
        }
}
/*给 最底层的.load 添加上动画*/
.load {
        animation: flash 2.5s infinite linear;
}
</style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

小脑斧 · 发表于 2020-3-18 17:34:01

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 6 1 - “拖尾”Loading动画 - 1.0

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: