锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识实现loading

【#yyds干货盘点#CSS实现loading效果效果】贵有恒，何必三更起、五更眠、最无益，只怕一日曝、十日寒。这篇文章主要讲述#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干货盘点# 07 MySQL数据排序

    下一篇：Golang+Vue实战容器多集群管理平台开发