CSS

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

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;
}

示例三

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

css

.load3 .loader {
    color: #3eaf7c;
    font-size: 90px;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    animation: aniLoad3 1.7s infinite ease, 
                aniRotate 1.7s infinite ease;
}
@keyframes aniLoad3 {
  0%,
  5%,
  95%,
  100% {
    box-shadow: 
      0 -0.83em 0 -0.4em, 
      0 -0.83em 0 -0.42em, 
      0 -0.83em 0 -0.44em, 
      0 -0.83em 0 -0.46em, 
      0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 
      0 -0.83em 0 -0.4em, 
      -0.087em -0.825em 0 -0.42em, 
      -0.173em -0.812em 0 -0.44em, 
      -0.256em -0.789em 0 -0.46em, 
      -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 
      0 -0.83em 0 -0.4em, 
      -0.338em -0.758em 0 -0.42em, 
      -0.555em -0.617em 0 -0.44em, 
      -0.671em -0.488em 0 -0.46em, 
      -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 
      0 -0.83em 0 -0.4em, 
      -0.377em -0.74em 0 -0.42em, 
      -0.645em -0.522em 0 -0.44em, 
      -0.775em -0.297em 0 -0.46em, 
      -0.82em -0.09em 0 -0.477em;
  }
}
@keyframes aniRotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

开始5个点,都重合,动画开始时位置改变,并旋转这个容器。

小结

本小结知识:

1、Box-Shadow 属性值,坐标系看图二

2、Box-Shadow 多阴影 用 逗号 分割

3、animation 动画(仅执行一次:forwards,永久执行 infinite)

4、animation 动画的速度曲线。linear 动画从头到尾的速度是相同的;ease 默认。动画以低速开始,然后加快,在结束前变慢;ease-in 动画以低速开始;ease-out 动画以低速结束;ease-in-out 动画以低速开始和结束;cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

5、transform 元素进行2D 或 3D 转换(行旋转、缩放、移动或倾斜)

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。需要源码的小伙伴可以购买,私信我哦。点击购买《跟我一起学,让你成为CSS大神》

谢谢大家一直以来的支持。

源码下载地址

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

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!

(271)

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

热评文章

发表评论

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