一款纯CSS3彩色的loading加载图标动画特效,有多种样式可供选择,应用还是比较广泛的,这么实用的功能,喜欢的童鞋请收下吧。
页面的head部分,设置好各个加载动画的样式即可,代码较多,这里仅贴出部分代码:
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: black; }
.container { text-align: center; }
section { width: 30%; display: inline-block; text-align: center; min-height: 215px; vertical-align: top; margin: 1%; background: #080915; border-radius: 5px; box-shadow: 0px 0px 30px 1px #103136 inset; }
@media only screen and (max-width: 600px) {
section { min-width: 350px; }
}
.loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 75px; display: inline-block; vertical-align: middle; }
.loader-star { position: absolute; top: calc(50% - 12px); }
/*LOADER-1*/
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; }
.loader-1 .loader-inner { position: absolute; border: 4px solid #f50057; border-radius: 50%; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; }
/*LOADER-2*/
.loader-2 .loader-star { position: static; width: 60px; height: 60px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation: loader-2-star 1s ease alternate infinite; animation: loader-2-star 1s ease alternate infinite; }
.loader-2 .loader-circles { width: 8px; height: 8px; background: #18ffff; border-radius: 50%; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite; animation: loader-2-circles 1s ease-in-out alternate infinite; }
页面的body部分,多个section标签放入一个div容器里面,部分代码如下:
<section>
<div class="loader loader-1">
<div class="loader-outter"></div>
<div class="loader-inner"></div>
</div>
</section>
<section>
<div class="loader loader-2">
<svg class="loader-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<polygon points="29.8 0.3 22.8 21.8 0 21.8 18.5 35.2 11.5 56.7 29.8 43.4 48.2 56.7 41.2 35.1 59.6 21.8 36.8 21.8 " fill="#18ffff" />
</svg>
<div class="loader-circles"></div>
</div>
</section>
<section>
<div class="loader loader-21">
<div class="css-times times1"></div>
<div class="css-times times2"></div>
<div class="css-times times3"></div>
</div>
</section>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791