SCSS loader effect

前端开发whqet,csdn,王海庆,whqet,前端开发专家

几天来看一组利用SCSS实现的loader effect(加载效果),鼓励大家自行动手实现,当然也可以到CodePen在线研究,效果如下所示。


制作这个案例前,需要准备这些。

1.掌握scss的使用,当然不用也可以,使用scss会比较高效。

2.掌握利用css3的box-shadow、border、border-radius的实现绘图。

3.掌握css3的动画方法。

4.一些耐心、一些创意(创意可以让你更好)

5.学会解析案例,先看静态图。


好的言归正传,我们来一步步的实现。

html部分如下,我们这里把所有的loader放到一个容器里面去,然后给每个loader两个类,一个类loader作统一设置,另一个类作个性化设置。

<div id=‘loaders‘>
  <div class=‘loader ball‘></div>
  <div class=‘loader spin‘></div>
  <div class=‘loader single‘></div>
  <div class=‘loader double‘></div>
  <div class=‘loader triple‘></div>
  <div class=‘loader dots‘></div>
</div>
接下来就是css了,我们这里使用scss来简化css的书写。

/*
 * CSS重置,这里使用CSSReset,篇幅限制不再列出,另外使用prefix-free所以可以不考虑浏览器前缀
 * */
*, *:before, *:after { box-sizing: border-box; }

/*
 * loader颜色取随机色
 * */
$color: hsl(random(360),75%,50%); $speed: 500ms;

/*
 * 整体设置
 * 网页背景色、loaders居中显示
 * loader的宽、高、圆角、动画
 * */
body { background: #111; }
#loaders {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 50px;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  .loader {
    position: relative;
    width: 50px; height: 50px;
    border-radius: 100%;
    border-style: solid;
    animation: loader $speed linear infinite;
 /*
 * 转动眼睛的设计,利用box-shadow的inset方法
 * */
    &.ball { box-shadow: inset 5px 5px 0 10px $color; }
 /*
 * 转环的设计,box-shadow配合border-width
 * */
    &.spin {
      border-width: 1px 1px 2px;
      border-color: $color;
      box-shadow: 0 1px $color;
    }
 /*
 * 单线的设计,border-width、border transparent
 * */
    &.single {
      border-width: 1px;
      border-color: $color transparent transparent;
    }
 /*
 * 双线的设计,border-width、border transparent
 * */
    &.double {
      border-width: 1px;
      border-color: $color transparent;
    }
/*
 * 三线的设计,border-width、border transparent
 * */
    &.triple {
      border-width: 1px;
      border-color: $color;
      border-top-color: transparent;
    }
/*
 * 环点的设计,box-shadow和before、after伪对象
 * */
    &.dots {
      animation-timing-function: steps(8);
      &:before,
      &:after {
        content: ‘‘;
        position: absolute;
        width: 10px; height: 10px;
        margin: auto;
        border-radius: 100%;
        background: $color;
      }
      &:before {
        top: 0; left: 0; right: 0;
        box-shadow: 20px 20px rgba($color,.8), 14px 6px rgba($color,.9), 14px 34px rgba($color,.7);
      }
      &:after {
        left: 0; right: 0; bottom: 0;
        background: rgba($color,.6);
        box-shadow: -20px -20px rgba($color,.4), -14px -6px rgba($color,.5), -14px -34px rgba($color,.3);
      }
    }
  }
}
/*
 * 旋转动画
 * */
@keyframes loader { 
	to { transform: rotate(360deg); } }
}

----------------------------------------------------------

前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。