0 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;}

CSS HYPNOTIZE ANIMATION BEAUTIFUL @Dr Tech |HTML| |CSS| |WEBSITE| |TUTO...

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);}