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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 6 2 - 三点唤醒Loading动画 - 2.0
返回列表 发新帖
查看: 3161|回复: 9

[庖丁解牛] 0 0 6 2 - 三点唤醒Loading动画 - 2.0

[复制链接]
不二如是
发表于 2017-3-4 14:33:29 | 显示全部楼层 |阅读模式

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

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

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

在61我们介绍了“拖尾”的玩法。

算是animation的@keyframes load-effect简单玩法，这次分享一个更有意思的～

对了，安利一下，border-radius不会的，请点这里

本帖的重点是“box-shadow”高级玩法，入门请看 0 0 3 3 - Shadow之块状元素阴影
Snip20170304_664.png


本次演示单位用em，1em = 16px。

上代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3帧动画</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.         }
  10.         .load{
  11.             font-size: 33px;
  12.             width: 1em;
  13.             height: 1em;
  14.             border-radius: 50%;
  15.             position: relative;
  16.             text-indent: -8888em;

  18.             box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;
  19.         }

  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="load">鱼C-不二如是</div>
  25. </body>
  26. </html>
复制代码

效果图：
Snip20170304_665.png


不是说好了box-shadow是负责设置阴影的吗？！

那这三个圈，咋来的？


先憋着急，为load添加一个背景色
Snip20170304_669.png


打个广告，看到WebStorm的编辑器的性感了嘛？！欲知更多详情，请点这里

效果图：
Snip20170304_667.png


其实这三个白点仍然是box-shadow生成的三个阴影。

只不过是颜色是白色，并且由于本尊通过border-radius设置为圆形，他们也是圆形了。

box-shadow的有5个属性值，所以干了五件事：

☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。

☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。

☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。

☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。

☆第五个参数（#FFF，#FFF，#FFF），设置颜色。

这四个参数就是本帖的重点！


现在只要在@keyframe load-effect{}中多次设置box-shadow不就可以产生渐变效果了吗？！

注释掉box-shadow，完成代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>n帧动画</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.         }
  10.         .load{
  11.             font-size: 33px;
  12.             width: 1em;
  13.             height: 1em;
  14.             border-radius: 50%;
  15.             position: relative;
  16.             text-indent: -8888em;

  18.             /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
  19.             /*background: #8C0044;*/
  20.             animation: load-effect 0.99s infinite linear;

  22.         }

  24.         @keyframes load-effect {
  25.             0%{
  26.                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  27.             }
  28.             25%{
  29.                 box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
  30.             }
  31.             50%{
  32.                 box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
  33.             }
  34.             75%{
  35.                 box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
  36.             }
  37.             100%{
  38.                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  39.             }
  40.         }

  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="load">鱼C-不二如是</div>
  46. </body>
  47. </html>
复制代码

效果图：
1.gif


在animation动画中，分别定义0%、25%、50%、75%、100%五种动画状态。

顺便多加了多加了个点，4个点颜色各不相同。

同一行，不同列的大小变化都遵循：

->1->0.5em->0->-0.5em->


每个值在同一行只出现一次，列可以重复。

相信聪明如你，一点就透～


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


官方 Web 课程：

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献！
shishunfu + 5 + 5 + 3 支持楼主！

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

shishunfu
发表于 2017-5-12 15:17:46 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>3帧动画</title>

  7.         <style type="text/css">
  8.                 body{
  9.                         background: #000;
  10.                 }
  11.                 .load{
  12.                         font-size: 33px;
  13.                         width: 1em;
  14.                         height: 1em;
  15.                         border-radius: 50%;
  16.                         position: relative;
  17.                         animation: load-effect 0.99s infinite linear;
  18.                         /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/  
  19. /*        ☆第一个参数，代表距离左侧的水平位移距离。
  20.         ☆第二个参数，代表距离上侧的纵向移动距离。
  21.         ☆第三个参数，代表清晰度，0则没有模糊效果。
  22.         ☆第四个参数，代表圆点大小，1.5em表示将阴影外扩3/2宽度。
  23.         ☆第五个参数，设置颜色。
  24. */
  25.                        
  26.                 }
  27.                 @keyframes load-effect {
  28.                         0%{
  29.                                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  30.                                
  31.                         }
  32.                         25%{
  33.                                 box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
  34.                         }
  35.                         50%{
  36.                                 box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
  37.                         }
  38.                         75%{
  39.                                 box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
  40.                         }
  41.                         100%{
  42.                                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  43.                         }
  44.                 }
  45.         </style>
  46. </head>
  47. <body>
  48. <div class="load"></div>
  49. </body>
  50. </html>
复制代码
00493帧动画.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-12 21:44
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-6 08:13:19 | 显示全部楼层
交作业！
062.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-7-2 22:17:54 | 显示全部楼层
交作业：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3帧动画</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.         }
  10.         .load{
  11.             font-size: 33px;
  12.             width: 1em;
  13.             height: 1em;
  14.             border-radius: 50%;
  15.             position: relative;
  16.             text-indent: -8888em;
  17.             /*
  18.             ☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。
  19.             ☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。
  20.             ☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。
  21.             ☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。
  22.             ☆第五个参数（#FFF，#FFF，#FFF），设置颜色。
  23.             */
  24.             animation:load-effect 0.99s infinite linear;

  26.         }
  27.         @keyframes load-effect{
  28.             0%{
  29.                 box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
  30.             }
  31.             25%{
  32.                 box-shadow: 3em 2em 10px 0.5em #FCC,6em 2em 10px 0 #9F9,9em 2em 10px -0.5em #CCF,12em 2em 10px 1em #F7F;
  33.             }
  34.             50%{
  35.                 box-shadow: 3em 2em 10px 0 #FCC,6em 2em 10px -0.5em #9F9,9em 2em 10px 1em #CCF,12em 2em 10px 0.5em #F7F;
  36.             }
  37.             75%{
  38.                 box-shadow: 3em 2em 10px -0.5em #FCC,6em 2em 10px 1em #9F9,9em 2em 10px 0.5em #CCF,12em 2em 10px 0 #F7F;
  39.             }
  40.             100%{
  41.                 box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
  42.             }
  43.         }
  44. </style>
  45. </head>

  47. <body>
  48. <div class="load">鱼C-不二如是</div>
  49. </body>
  50. </html>
复制代码

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

使用道具 举报

STmove
发表于 2018-7-27 13:23:06 | 显示全部楼层
webstorm确实很强大，两天就帮我养成了忘写分号的好习惯
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>0062-3帧动画</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.         }
  10.         .load{
  11.             font-size: 33px;  /*都&#8482; -8888em了，还要设置字体大小干嘛*/
  12.             width: 1em;
  13.             height: 1em;
  14.             border-radius: 50%;
  15.             position: relative;
  16.             text-indent: -8888em;
  17.             /*background: #45ccd6;*/
  18.             /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.3em #FFF;*/
  19.             animation: loading 1s infinite linear;
  20.         }
  21.         @keyframes loading
  22.         {
  23.             0%
  24.             {
  25.                 box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
  26.             }
  27.             25%
  28.             {
  29.                 box-shadow: 3em 2em 0.5em 1em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
  30.             }
  31.             50%
  32.             {
  33.                 box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0.5em 1em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
  34.             }
  35.             75%
  36.             {
  37.                 box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0.5em 1em #CCF,12em 2em 0 0.2em #F7F;
  38.             }
  39.             100%
  40.             {
  41.                 box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0.5em 1em #F7F;
  42.             }
  43.         }

  45.     </style>
  46. </head>
  47. <body>
  48. <div class="load">鱼C-STmove</div>
  49. </body>
  50. </html>
复制代码

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

使用道具 举报

MSK
发表于 2018-7-28 21:38:36 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>三点打开loading</title>
  5.         <meta charset="utf-8">
  6.         <style type="text/css">
  7.                 @keyframes loading{
  8.                         0%{
  9.                                 box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
  10.                         }
  11.                         12.5%{
  12.                                 box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 1em #fff;
  13.                         }
  14.                         25%{
  15.                                 box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 1.5em #fff;
  16.                         }
  17.                         37.5%{
  18.                                 box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 1.5em #fff, 14em 2em 0 1em #fff;
  19.                         }
  20.                         50%{
  21.                                 box-shadow: 2em 2em 0 1.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 0.5em #fff;
  22.                         }
  23.                         62.5%{
  24.                                 box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 0em #fff;
  25.                         }
  26.                         75%{
  27.                                 box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 -0.5em #fff;
  28.                         }
  29.                         87.5%{
  30.                                 box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 -0.5em #fff, 14em 2em 0 0em #fff;
  31.                         }
  32.                         100%{
  33.                                 box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
  34.                         }
  35.                 }
  36.                 body{
  37.                         background: #000;
  38.                 }
  39.                 .load{
  40.                         box-sizing: border-box;
  41.                         width: 2.0em;
  42.                         height: 2.0em;
  43.                         border-radius: 50%;
  44.                         background: #f0f;
  45.                         text-indent: -999px;
  46.                         box-shadow: box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
  47.                         animation: loading 1.3s infinite linear;
  48.                 }
  49.         </style>
  50. </head>
  51. <body>
  52.         <div class="load">loading</div>
  53. </body>
  54. </html>
复制代码

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

使用道具 举报

你在意在便在
发表于 2019-11-6 22:23:43 | 显示全部楼层
lei 了 lei 了
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>3帧动画</title>
  6. <style type="text/css">
  7. * {
  8.         margin:0;
  9.         padding:0;
  10. }
  11. body {
  12.         background: #000;
  13. }
  14. .load {
  15.         font-size: 33px;
  16.         width: 1em;
  17.         height: 1em;
  18.         border-radius: 50%;
  19.         position: relative;
  20.         text-indent: -8888em;
  21.         animation:flash 5s infinite linear;
  22. }
  23. @keyframes flash{
  24.         0% {
  25.                 box-shadow:3em 2em 0    1em rgba(156,136,255,1),
  26.                            6em 2em 0  0.5em rgba(0,168,255,1),
  27.                            9em 2em 0    0em rgba(232,65,24,1),
  28.                           12em 2em 0 -0.5em rgba(76,209,55,1)
  29.         }               
  30.         25% {
  31.                 box-shadow:3em 2em 0   0.5em rgba(156,135,255),
  32.                            6em 2em 0     0em rgba(0,168,255),
  33.                            9em 2em 0  -0.5em rgba(232,65,24),
  34.                           12em 2em 0     1em rgba(76,209,55)
  35.         }      
  36.         50% {
  37.                 box-shadow:3em 2em 0     0em rgba(156,136,255),
  38.                            6em 2em 0  -0.5em rgba(0,168,255),
  39.                            9em 2em 0     1em rgba(232,65,24),
  40.                           12em 2em 0   0.5em rgba(76,209,55)
  41.         }
  42.         75% {
  43.                 box-shadow:3em 2em 0  -0.5em rgba(156,136,255),
  44.                            6em 2em 0     1em rgba(0,168,255),
  45.                            9em 2em 0   0.5em rgba(232,65,24),
  46.                           12em 2em 0     0em rgba(76,209,55)
  47.         }
  48.         100% {
  49.                 box-shadow:3em 2em 0     1em rgba(156,136,255),
  50.                            6em 2em 0   0.5em rgba(0,168,255),
  51.                            9em 2em 0     0em rgba(232,65,24),
  52.                           12em 2em 0  -0.5em rgba(76,209,55)
  53.         }
  54. }
  55. </style>
  56. </head>
  57. <body>
  58.     <div class="load">让编程改变世界</div>
  59. </body>
  60. </html>
复制代码
三帧.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-11 13:34:15 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>n帧动画</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000;
  9.         }
  10.         .load{
  11.             font-size: 33px;
  12.             width: 1em;
  13.             height: 1em;
  14.             border-radius: 50%;
  15.             position: relative;
  16.             text-indent: -8888em;

  18.             /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
  19.             /*background: #8C0044;*/
  20.             animation: load-effect 0.99s infinite linear;

  22.         }

  24.         @keyframes load-effect {
  25.             0%{
  26.                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  27.             }
  28.             25%{
  29.                 box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
  30.             }
  31.             50%{
  32.                 box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
  33.             }
  34.             75%{
  35.                 box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
  36.             }
  37.             100%{
  38.                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  39.             }
  40.         }

  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="load">鱼C-不二如是</div>
  46. </body>
  47. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-18 22:11:49 | 显示全部楼层

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-27 01:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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