<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="try.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="loader one">
<span></span>
<span></span>
</div>
<div class="loader two">
<span></span>
<span></span>
</div>
</div>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
background: #eafdff;
}
.container
{
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.container .loader
{
position: relative;
width: 150px;
height: 150px;
margin: 100px;
}
.container .loader.one span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: #5989ff;
border-radius: 50%;
animation: animate ease-in-out 2s infinite;
}
.container .loader.one span:nth-child(2)
{
left: 50%;
background: rgba(56, 109, 241, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
animation-delay: -1s;
}
@keyframes animate
{
0%,100%
{
transform: translateX(-80px);
}
50%
{
transform: translateX(80px);
}
}
/* add shadow */
/* :before 为伪类，::before 为伪元素 */
.container .loader.one span:before,
.container .loader.two span:nth-child(1):before
{
content: '';
position: absolute;
width: 100%;
height: 40px;
bottom: -50px;
border-radius: 50%;
background: radial-gradient(rgba(0,0,0,0.4),transparent,transparent);
}
.container .loader.two span:nth-child(1)
{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: rgba(233,30,99,0.05);
border-radius: 50%;
backdrop-filter: blur(10px);
}
.container .loader.two span:nth-child(2)
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: -1;
overflow: hidden;
animation: rotate 1s linear infinite;
}
@keyframes rotate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.container .loader.two span:nth-child(2)::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: -50%;
top: -50%;
background: aquamarine;
}
标签：container,效果,100%,50%,loader,background,span,毛玻璃 From： https://www.cnblogs.com/daxiangcai/p/17015728.html