CSS সার্কুলার অ্যানিমেশন
প্রিভিউ
HTML
<div class="circle">
<img src="logo.png" alt="Jane Doe" />
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.8;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: url(bg.png) no-repeat center center/cover;
padding: 3rem 5rem;
min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center;
gap: 6rem;
}
h1 {
font-size: 2rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
}
.circle {
position: relative;
width: 160px;
aspect-ratio: 1;
border-radius: 50%;
outline: 30px solid rgba(0, 0, 0, 0.35);
outline-offset: -12px;
}
.circle img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: top;
border-radius: inherit;
}
.circle::before,
.circle::after {
position: absolute;
z-index: -1;
content: "";
inset: -40px;
border-radius: inherit;
background-image: conic-gradient(#00dbde, #fc00ff, #00dbde);
animation: rotate 3s linear infinite;
}
.circle::after {
filter: blur(2rem);
opacity: 0.7;
}
.circle:hover::before,
.circle:hover::after {
animation-play-state: paused;
}
@keyframes rotate {
/* from {
rotate: 0deg;
} */
to {
rotate: 360deg;
}
}