鱼C论坛

 找回密码
 立即注册
查看: 3962|回复: 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{ }

  13.         .load::after{ }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="load">Loading</div>
  18. </body>
  19. </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;

  10.         }
复制代码

效果图:
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 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-2 16:52:50 | 显示全部楼层
6
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-3 19:47:00 From FishC Mobile | 显示全部楼层
哈哈!你今天发的帖子也没啦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

明天穿越时空吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

明天穿越时空吧

我晕,提醒的bug又回来了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

正在慢慢修改…

一步一步来吧
想知道小甲鱼最近在做啥?请访问 -> 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

这里少了个逗号
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2017-8-4 09:28:39 | 显示全部楼层
交作业!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-4 09:29:46 | 显示全部楼层
交作业
061.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

animation: load-effect 2s infinite linear;

这条语句,添加在.load{}中了,那么可不可以这样理解:
.load,.load::before和.load::after三个元素都会执行此动画效果呢?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-6 11:06:52 | 显示全部楼层
最后只为.load添加动画效果是不是属于事件的捕获,我看为.load外面加一层元素,只给它添加动画效果,子元素.load也跟着转
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-17 18:41:08 From FishC Mobile | 显示全部楼层
为啥页面的滚动条会跟着动咧?
想知道小甲鱼最近在做啥?请访问 -> 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
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

花.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-28 20:00

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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