#yyds干货盘点#CSS实现loading效果效果
Posted 歆冉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#CSS实现loading效果效果相关的知识，希望对你有一定的参考价值。
1.效果展示
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实现随机不规则圆角头像