SCSS loader effect

分手后的思念是犯贱 2022-08-12 00:15 121阅读 0赞

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

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

![1409875837_3704.gif][]

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

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

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

3.掌握css3的动画方法。

4.一些耐心、一些创意（创意可以让你更好）

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

![SouthEast][]

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

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

接下来就是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); } }
    }

\-------------不过瘾，[再加一个][Link 1]\--------------------

$colorr: hsl(180+random(180),85%,50%);
    @keyframes loaderr { from { transform: rotate(1800deg); } }
    &.doubleCircle {
            border-width:2px;
            border-color:$color transparent;
            &:before {
              content:"";
              position: absolute;
              width:56px;
              height:56px;
              top:-5px;
              left:-5px;
              border-radius:100%;
              border-style:solid;
              border-width:3px;
              border-color:transparent $colorr;
              animation: loaderr $speed*3 linear infinite;
          }
        }

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

[CodePen]: http://codepen.io/whqet/pen/LHmdw
[1409875837_3704.gif]: https://img-my.csdn.net/uploads/201409/05/1409875837_3704.gif
[SouthEast]: /images/20220810/69a0de9adb4046b083a86e675138286e.png
[Link 1]: http://codepen.io/whqet/pen/ybacf
[whqet]: http://blog.csdn.net/whqet