2024年04月20日 建站教程
如何利用css3做一个动态loading效果，下面web建站小编给大家简单介绍一下实现代码！
html代码：
<div class="loader">
<div class="face">
<div class="circle"></div>
</div>
<div class="face">
<div class="circle"></div>
</div>
</div>
css3代码：
body {
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
.loader {
width:20em;
height:20em;
font-size:10px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.loader .face {
position:absolute;
border-radius:50%;
border-style:solid;
animation:animate 3s linear infinite;
}
.loader .face:nth-child(1) {
width:100%;
height:100%;
color:gold;
border-color:currentColor transparent transparent currentColor;
border-width:0.2em 0.2em 0em 0em;
--deg:-45deg;
animation-direction:normal;
}
.loader .face:nth-child(2) {
width:70%;
height:70%;
color:lime;
border-color:currentColor currentColor transparent transparent;
border-width:0.2em 0em 0em 0.2em;
--deg:-135deg;
animation-direction:reverse;
}
.loader .face .circle {
position:absolute;
width:50%;
height:0.1em;
top:50%;
left:50%;
background-color:transparent;
transform:rotate(var(--deg));
transform-origin:left;
}
.loader .face .circle::before {
position:absolute;
top:-0.5em;
right:-0.5em;
content:'';
width:1em;
height:1em;
background-color:currentColor;
border-radius:50%;
box-shadow:0 0 2em,0 0 4em,0 0 6em,0 0 8em,0 0 10em,0 0 0 0.5em rgba(255,255,0,0.1);
}
@keyframes animate {
to {
transform:rotate(1turn);
}
}
本文链接：http://so.lmcjl.com/news/2644/