CSS HYPNOTIZE ANIMATION BEAUTIFUL @Dr Tech |HTML| |CSS| |WEBSITE| |TUTO...
HTML And CSS Cooding
August 06, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="rings">
<div class="ring anim-zoomIn" style="--delay:06"></div>
<div class="ring anim-zoomIn" style="--delay:04"></div>
<div class="ring anim-zoomIn" style="--delay:03"></div>
<div class="ring anim-zoomIn" style="--delay:02"></div>
<div class="ring anim-zoomIn" style="--delay:01"></div>
<div class="ring anim-zoomIn" style="--delay:00"></div>
</div>
</body>
</html>
CSS SOURCE CODE
body {
width: 100vw;
height: 100vh;
background-color: #354259;
align-items: center;
justify-content: center;
overflow: hidden;
display: flex;}
.rings {
--border-width: 2px;
--border-style: solid;
--animation-duration: 2s;
--animation-count: infinite;
--animation-direction: normal;
--animation-fill-mode: both;
position: relative;
aspect-ratio: 1/1;}
.rings > .ring {
position: absolute;
top: 50%;
left: 50%;
aspect-ratio: 1/1;
border-width: var(--border-width);
border-style: var(--border-style);
border-radius: 50%;
transform-origin: center;
animation-duration: var(--animation-duration);
animation-delay: calc(0.4s * var(--delay));
animation-iteration-count: var(--animation-count);
animation-direction: var(--animation-direction);
animation-fill-mode: var(--animation-fill-mode);
filter: opacity(0);
will-change: transform;
overflow: hidden;}
.rings > .ring:nth-child(even) {
border-color: blue;}
.rings > .ring:nth-child(odd) {
border-color:black ;}
.rings > .ring:first-child {
width: 50px;
margin: -25px 0 0 -25px;}
.rings > .ring:nth-child(2) {
width: 64px;
margin: -32px 0 0 -32px;}
.rings > .ring:nth-child(3) {
width: 78px;
margin: -39px 0 0 -39px;}
.rings > .ring:nth-child(4) {
width: 92px;
margin: -46px 0 0 -46px;}
.rings > .ring:nth-child(5) {
width: 104px;
margin: -52px 0 0 -52px;}
.rings > .ring:nth-child(6) {
width: 118px;
margin: -59px 0 0 -59px;}
.anim-zoomIn {
animation-name: zoomIn;}
@keyframes zoomIn {
0% {transform: perspective(200px) translatez(0);filter: opacity(0);}
60%{filter: opacity(100%);}
100% {transform: perspective(200px) translatez(200px);}}
.anim-zoomInPan {animation-name: zoomInPan;}
