p{text-indent:2em;}前端开发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); } }
}
-------------只是瘾。再加一个--------------------
<div id='loaders'>
<div class='loader doubleCircle'></div>
</div>
$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。关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------