SCSS loader effect
几天来看一组利用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前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------