#yyds干货盘点#CSS实现loading效果效果

Posted 歆冉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#CSS实现loading效果效果相关的知识,希望对你有一定的参考价值。

1.效果展示

#yyds干货盘点#CSS实现loading效果效果_loading

2.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*
margin: 0;
padding: 0;

.box
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;

.box>div
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

.box>div::before
content: ;
display: block;
width: 15%;
height: 15%;
margin: 0 auto;
border-radius: 50%;
background-color: #ccc;
animation: fading-circle 1.2s infinite ease-in-out;

/*第二个点*/
.box>div.b1
transform: rotate(30deg);

.box>div.b1::before
animation-delay: -1.1s;

/*第三个点*/
.box>div.b2
transform: rotate(60deg);

.box>div.b2::before
animation-delay: -1.0s;

/*第四个点*/
.box>div.b3
transform: rotate(90deg);

.box>div.b3::before
animation-delay: -.9s;

/*第五个点*/
.box>div.b4
transform: rotate(120deg);

.box>div.b4::before
animation-delay: -.8s;

/*第六个点*/
.box>div.b5
transform: rotate(150deg);

.box>div.b5::before
animation-delay: -.7s;

/*第七个点*/
.box>div.b6
transform: rotate(180deg);

.box>div.b6::before
animation-delay: -.6s;

/*第八个点*/
.box>div.b7
transform: rotate(210deg);

.box>div.b7::before
animation-delay: -.5s;

/*第九个点*/
.box>div.b8
transform: rotate(240deg);

.box>div.b8::before
animation-delay: -.4s;

/*第十个点*/
.box>div.b9
transform: rotate(270deg);

.box>div.b9::before
animation-delay: -.3s;

/*第十一个点*/
.box>div.b10
transform: rotate(300deg);

.box>div.b10::before
animation-delay: -.2s;

/*第二个点*/
.box>div.b11
transform: rotate(330deg);

.box>div.b11::before
animation-delay: -.1s;

/*第一个点*/
.box>div.b12
transform: rotate(360deg);


@keyframes fading-circle
0%, 39%, 100%
opacity: 0 ;

40%
opacity: 1;


</style>
</head>
#yyds干货盘点#CSS实现随机不规则圆角头像

CSS实现一只自由飞翔的鸟儿?#yyds干货盘点#

#yyds干货盘点# CSS实现阮大佬博文的阅读进度功能

中秋你家的月亮圆吗?百行CSS实现中秋圆月动效#yyds干货盘点#

#yyds干货盘点# 实现渐变文字和文字倒影

#yyds干货盘点#CSS的clamp()函数实现响应式布局