↓HTML or PHP
<div class="loader"></div>
↓CSS
.loader {
width: 40px;
aspect-ratio: 1;
position: relative;
transform: rotate(45deg);
}
.loader:before,
.loader:after {
content: "";
position: absolute;
inset: 0;
border-radius: 50% 50% 0 50%;
background: #514b82;
-webkit-mask: radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
}
.loader:after {
animation: l6 1s infinite;
transform: perspective(300px) translateZ(0px)
}
@keyframes l6 {
to {transform: perspective(300px) translateZ(150px);opacity:0}
}
コメント