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

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

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

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

登录/注册后可看大图

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

上代码：

• 
  
• 
  
• 
  
• 
  
•     3帧动画
  
• 
  
•         body{
  
•             background: #000;
  
•         }
  
•         .load{
  
•             font-size: 33px;
  
•             width: 1em;
  
•             height: 1em;
  
•             border-radius: 50%;
  
•             position: relative;
  
•             text-indent: -8888em;
  
• 
  
•             box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;
  
•         }
  
• 
  
• 
  
• 
  
• 
  
•     鱼C-不二如是
  
• 
  

效果图：

登录/注册后可看大图

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

那这三个圈，咋来的？

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

登录/注册后可看大图

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

效果图：

登录/注册后可看大图

其实这三个白点仍然是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，完成代码：

• 
  
• 
  
• 
  
• 
  
•     n帧动画
  
• 
  
•         body{
  
•             background: #000;
  
•         }
  
•         .load{
  
•             font-size: 33px;
  
•             width: 1em;
  
•             height: 1em;
  
•             border-radius: 50%;
  
•             position: relative;
  
•             text-indent: -8888em;
  
• 
  
•             /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
  
•             /*background: #8C0044;*/
  
•             animation: load-effect 0.99s infinite linear;
  
• 
  
•         }
  
• 
  
•         @keyframes load-effect {
  
•             0%{
  
•                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  
•             }
  
•             25%{
  
•                 box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
  
•             }
  
•             50%{
  
•                 box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
  
•             }
  
•             75%{
  
•                 box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
  
•             }
  
•             100%{
  
•                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  
•             }
  
•         }
  
• 
  
• 
  
• 
  
• 
  
•     鱼C-不二如是
  
• 
  

效果图：

登录/注册后可看大图

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

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

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

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

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

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







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

）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！

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

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

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

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

登录/注册后可看大图

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

上代码：

• 
  
• 
  
• 
  
• 
  
•     3帧动画
  
• 
  
•         body{
  
•             background: #000;
  
•         }
  
•         .load{
  
•             font-size: 33px;
  
•             width: 1em;
  
•             height: 1em;
  
•             border-radius: 50%;
  
•             position: relative;
  
•             text-indent: -8888em;
  
• 
  
•             box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;
  
•         }
  
• 
  
• 
  
• 
  
• 
  
•     鱼C-不二如是
  
• 
  

效果图：

登录/注册后可看大图

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

那这三个圈，咋来的？

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

登录/注册后可看大图

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

效果图：

登录/注册后可看大图

其实这三个白点仍然是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，完成代码：

• 
  
• 
  
• 
  
• 
  
•     n帧动画
  
• 
  
•         body{
  
•             background: #000;
  
•         }
  
•         .load{
  
•             font-size: 33px;
  
•             width: 1em;
  
•             height: 1em;
  
•             border-radius: 50%;
  
•             position: relative;
  
•             text-indent: -8888em;
  
• 
  
•             /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
  
•             /*background: #8C0044;*/
  
•             animation: load-effect 0.99s infinite linear;
  
• 
  
•         }
  
• 
  
•         @keyframes load-effect {
  
•             0%{
  
•                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  
•             }
  
•             25%{
  
•                 box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
  
•             }
  
•             50%{
  
•                 box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
  
•             }
  
•             75%{
  
•                 box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
  
•             }
  
•             100%{
  
•                 box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
  
•             }
  
•         }
  
• 
  
• 
  
• 
  
• 
  
•     鱼C-不二如是
  
• 
  

效果图：

登录/注册后可看大图

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

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

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

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

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

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







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

）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！