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

几天来看一组利用SCSS实现的loader effect(载入效果)。鼓舞大家自行动手实现，当然也能够到。效果例如以下所看到的。

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

1.掌握scss的使用。当然不用也能够，使用scss会比較高效。

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

3.掌握css3的动画方法。

4.一些耐心、一些创意（创意能够让你更好）

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

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

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

-------------只是瘾。--------------------

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

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