设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 6 1 - “拖尾”Loading动画 - 1.0
返回列表 发新帖
查看: 4718|回复: 13

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

[复制链接]
不二如是
发表于 2017-3-2 15:35:02 | 显示全部楼层 |阅读模式

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

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

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

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

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

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


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

只是想说明一个观点：

实践永远比套路更实用！


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


框架和60一样，但要把之前的设置删除掉哦～
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>进度条</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.             margin: 100px;
  10.         }
  11.     .load{  }
  12.         .load::before{ }

  14.         .load::after{ }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="load">Loading</div>
  19. </body>
  20. </html>
复制代码


修改.load
  1. .load{
  2.         text-indent: -9999px;
  3.         position: relative;
  4.         width: 202px;
  5.         height: 202px;
  6.         box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
  7.         border-radius: 50%;
  8.                 background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
  9.     }
复制代码

Snip20170302_622.png


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

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

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

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

功能还是“魔术板”。

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

考虑个人比较喜欢“下”的姿势 ，就右下角吧
  1. .load::before{
  2.             position: absolute;
  3.             content: '';
  4.             width: 50%;
  5.             height: 50%;
  6.             background: #FFF;
  7.             border-radius: 0 0 101px 0;
  8.             right: 0px;
  9.             bottom: 0px;
  10.         }
复制代码

效果图：
Snip20170302_623.png


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

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

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

添加after伪元素，绘制一个内部实心圆，将其他细节覆盖掉。
  1.       .load::after{
  2.             position: absolute;
  3.             background: #000;
  4.             width: 162px;
  5.             height: 162px;
  6.             border-radius: 50%;
  7.             content:'';
  8.             top: 20px;
  9.             left: 20px;

  11.         }
复制代码

效果图：
Snip20170302_626.png


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

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


恭喜你，答错了！


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

现在只要旋转起来就行了，这个还是老办法
  1. @keyframes load-effect {
  2.             0% {
  3.                
  4.                 transform: rotate(0deg);
  5.             }
  6.             100% {
  7.                
  8.                 transform: rotate(360deg);
  9.             }
  10.             }
  11. .load{
  12.       /*其他*/
  13.         animation: load-effect 2s infinite linear;
  14.     }
复制代码

效果图：
1.gif


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


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


官方 Web 课程：

评分

参与人数 3荣誉 +15 鱼币 +15 贡献 +9 收起 理由
微末非末 + 5 + 5 + 3 无条件支持楼主！
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献！
alltolove + 5 + 5 + 3 支持楼主！

查看全部评分

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

宇航
发表于 2017-3-2 16:52:50 | 显示全部楼层
6
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

alltolove
发表于 2017-3-3 19:47:00 From FishC Mobile | 显示全部楼层
哈哈！你今天发的帖子也没啦
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-3 21:26:32 | 显示全部楼层
alltolove 发表于 2017-3-3 19:47
哈哈！你今天发的帖子也没啦

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

明天穿越时空吧
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

alltolove
发表于 2017-3-3 21:53:19 | 显示全部楼层
不二如是 发表于 2017-3-3 21:26
哈哈，版本恢复到昨天晚上了

明天穿越时空吧

我晕，提醒的bug又回来了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-3 22:36:23 | 显示全部楼层
alltolove 发表于 2017-3-3 21:53
我晕，提醒的bug又回来了

正在慢慢修改…

一步一步来吧
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

会魔法的魔法
发表于 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

这里少了个逗号
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

aswyamato1989
发表于 2017-8-4 09:28:39 | 显示全部楼层
交作业！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-4 09:29:46 | 显示全部楼层
交作业
061.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-4 09:31:23 | 显示全部楼层
另外有一个疑问：

animation: load-effect 2s infinite linear;

这条语句，添加在.load{}中了，那么可不可以这样理解：
.load，.load::before和.load::after三个元素都会执行此动画效果呢？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

爱学习的懒懒君
发表于 2018-10-6 11:06:52 | 显示全部楼层
最后只为.load添加动画效果是不是属于事件的捕获，我看为.load外面加一层元素，只给它添加动画效果，子元素.load也跟着转
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

chmmoon
发表于 2018-10-17 18:41:08 From FishC Mobile | 显示全部楼层
为啥页面的滚动条会跟着动咧？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-6 20:43:44 | 显示全部楼层
自己竟然慢这个程度了~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>进度条</title>
  6. <style type="text/css">
  7. /* 清除样式 样式位置 */
  8. * {
  9.         margin:0;
  10.         padding:0;
  11. }
  12. body {
  13.         background: #000;
  14.         margin:100px;
  15. }
  16. /* 最底层 */
  17. .load {
  18.         text-indent: -9999px;
  19.         position:relative;
  20.         width: 200px;
  21.         height: 200px;
  22.         box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
  23.         background: linear-gradient(to left,
  24.                 rgba(255,255,255) 11%,
  25.                 rgba(255,255,255,0) 50%
  26.         );
  27.         border-radius: 50%;
  28. }
  29. /*中间层*/
  30. .load::before {
  31.         content:'';
  32.         position:absolute;
  33.         width: 100px;
  34.         height: 200px;
  35.         /* 渐变色开始和颜色和最底层背景颜色相同 实现重合 */
  36.         background:  linear-gradient(180deg,
  37.                 rgba(255,255,255,0) 11%,
  38.                 rgba(198,255,221) 30%,
  39.                 rgba(251,215,134) 50%,
  40.                 rgba(247,121,125) 90%
  41.         );
  42.         border-radius:0 100px 100px 0;
  43.         left: 100px;
  44. }
  45. /* 最顶层 覆盖中心多余部分 */
  46. .load::after {
  47.         content: '';
  48.         position: absolute;
  49.         width: 170px;
  50.         height: 170px;
  51.         background: #000;
  52.         border-radius: 50%;
  53.         left: 15px;
  54.         bottom: 15px;
  55. }
  56. /*设置动画*/
  57. @keyframes flash{
  58.         0% {
  59.                 transform: rotate(0deg);
  60.         }
  61.         25% {
  62.                 transform: rotate(90deg);
  63.         }
  64.         50% {
  65.                 transform: rotate(180deg);
  66.         }
  67.         75% {
  68.                 transform: rotate(270deg);
  69.         }
  70.         100% {
  71.                 transform: rotate(360deg);
  72.         }
  73. }
  74. /*给 最底层的.load 添加上动画*/
  75. .load {
  76.         animation: flash 2.5s infinite linear;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81.     <div class="load">Loading</div>
  82. </body>
  83. </html>
复制代码
圈圈.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-18 17:34:01 | 显示全部楼层

花.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 04:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表