CSS

Box-Shadow Loading,可以创造无限可能

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

Box-Shadow 通常,我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能,多层阴影,制作一些非常有趣的动画。

box-shadow: h-shadow v-shadow blur spread color inset;

属性值描述
h-shadow 指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边

v-shadow 指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部

blur 阴影模糊半径,此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊

spread 阴影扩展半径,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

color 阴影颜色,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

inset 阴影类型,默认的投影方式是外阴影;inset就是将外阴影变成内阴影

注意:多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。

下面我们一起,通过简单示例来学习吧

示例一

老规矩,看图说话(这个效果,你能想到什么办法实现了?gif...),下面我们一步一步显示上图的效果

<div class="load-container load1">
  <div class="loader"></div>
</div>

css

.load-container {
  width: 240px;
  height: 240px;
  margin: 50px auto;
}

.load1 .loader {
  color: #3eaf7c;
  font-size: 20px;
  margin: 200px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  border: 1px solid #3eaf7c;
  box-shadow: 
      0 -3em 0 0.2em,
      2em -2em 0 0.2em,
      3em 0em 0 0.2em,
      2em 2em 0 0.2em,
      0em 3em 0 0.2em,
      -2em 2em 0 0.2em,
      -3em 0em 0 0.2em,
      -2em -2em 0 0.2em;
}

有了这样一个图,是不是非常清楚了,我们利用多层阴影,制作一个圆圈围绕的环形。然后动画动画不停的改变每个圆圈颜色。

@keyframes aniLoad1 {
  0%,
  100% {
    box-shadow: 
      0em -2.6em 0em 0em #3eaf7c, 
      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 
      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 
      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 
      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), 
      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), 
      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 
      0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 
      1.8em -1.8em 0 0em #3eaf7c, 
      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 
      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 
      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), 
      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    ...
  }
  ...
}
.load1 .loader{
  animation: aniLoad1 1.1s infinite ease;
}

这样就形成了loading效果。

示例二

有了示例一的经验,我们稍微变形一下,动画改变每个圆圈的大小,即可形成下图动画:

<div class="load-container load2">
  <div class="loader"></div>
</div>

css

@keyframes aniLoad2 {
  0%,
  100% {
    box-shadow: 
      0 -3em 0 0.2em, 
      2em -2em 0 0em, 
      3em 0 0 -1em, 
      2em 2em 0 -1em, 
      0 3em 0 -1em, 
      -2em 2em 0 -1em, 
      -3em 0 0 -1em, 
      -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 
      0 -3em 0 0, 
      2em -2em 0 0.2em, 
      3em 0 0 0, 
      2em 2em 0 -1em, 
      0 3em 0 -1em, 
      -2em 2em 0 -1em, 
      -3em 0 0 -1em, 
      -2em -2em 0 -1em;
  }
  25% {
    ...
  }
  ...
  87.5% {
    ...
  }
}
.load2 .loader {
  ...
  animation: aniLoad2 1.3s infinite linear;
}

示例三

更多精彩内容,可以点击“立即支付”,查看隐藏内容哦!

资源下载价格1立即支付    升级VIP后免费升级VIP,支付前请先登录,支付前请先登录,支付前请先登录!
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(382)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注