HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="loader">
<div class="mr-freeze"></div>
<div class="mr-freeze"></div>
<div class="mr-freeze"></div>
<div class="mr-freeze"></div>
<div class="mr-freeze"></div>
<div class="mr-freeze"></div>
</div>
</body>
</html>
CSS SOURCE CODE
:root{--color-bg: #AD8FFF;
--animation-duration: 2000ms;
--animation-stagger: 80ms;
--hue: 360;
--delay: 0;
--hex: #F46A6C;
--size: 6vw;}
*{box-sizing:border-box;}
body{
background: linear-gradient(250deg,greenyellow,lightpink,lightgreen,hotpink);
padding:1rem;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;}
.loader{
display:flex;
align-content:center;
justify-content:center;
max-width:50vw;}
.mr-freeze{
margin:0 2.5%;
position:relative;
width: var(--size);
max-height:80vh;
aspect-ratio: 1 / 8;
animation:infinite syrup-displacement var(--animation-duration) ease;
animation-delay: var(--delay);
transform-origin:bottom center;
z-index:3;
border:1px solid rgba(255,255,255,.5) ;
border-width: 0 2px;
background:no-repeat bottom 1rem center / 100% 30%
linear-gradient(hsla( var(--hue), 100%, 50%, 50%),
hsla( var(--hue), 100%, 60%, 50%)
);}
mr-freeze:nth-child(1){
--hue:360;
--hex: #F46A6C;
--delay: calc( var(--animation-stagger) * 1);}
.mr-freeze:nth-child(2){
--hue:38;
--hex: #FBAD21;
--delay: calc( var(--animation-stagger) * 2);}
.mr-freeze:nth-child(3){
--hue:48;
--hex: #F7D445;
--delay: calc( var(--animation-stagger) * 3);}
.mr-freeze:nth-child(4){
--hue:84;
--hex: #9BCC50;
--delay: calc( var(--animation-stagger) * 4);}
.mr-freeze:nth-child(5){
--hue:194;
--hex:#3AB9DE;
--delay: calc( var(--animation-stagger) * 5);}
.mr-freeze:nth-child(6){
--hue:290;
--hex:#AC51C0;
--delay: calc( var(--animation-stagger) * 6);}
.mr-freeze:before{
--inset: 10%;
content:'';
display:block;
position:absolute;
top: var(--inset);
right: var(--inset);
bottom: 1.5rem;
left: var(--inset);
border: 2px solid var(--hex);
background: var(--hex);
border-radius: 20% / 2%;
pointer-events:none;
opacity:.9;
animation: infinite pop-da-pop var(--animation-duration) ease;
animation-delay: var(--delay);
box-shadow:
inset .25rem .25rem .5rem hsla(40, 100%, 50%, 0.3),
inset -.25rem -.25rem .5rem hsla(200, 100%, 50%, 0.15);}
.mr-freeze:after{
content:'';
display:block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
no-repeat top center / 100% calc(100% - 1rem)
linear-gradient(
to right,
rgba(255,255,255,.3) ,
rgba(255,255,255,.1) 30%,
rgba(255,255,255,.4) 30%,
rgba(255,255,255,.0)),
no-repeat bottom 1rem center / 100% 2px
linear-gradient(
to bottom,
rgba(255,255,255,.5),
rgba(255,255,255,.5)),
no-repeat bottom center / 100% 1rem
linear-gradient(
to bottom,
rgba(255,255,255,.6),
rgba(255,255,255,.4));
clip-path:
polygon(
0 0,
100% 0,
100% 100%,
87.5% 99%,
75.0% 100%,
62.5% 99%,
50.0% 100%,
37.5% 99%,
25.0% 100%,
12.5% 99%,
0 100%);}
@keyframes pop-da-pop{
0%, 5%, 95%, 100%{
transform: translateY(0);}
40%, 60%{
transform: translateY(-50%);}
50%{
transform: translateY(-48%);}}
@keyframes syrup-displacement{
0%, 100%{
background-size: 100% 30%;}
15%, 85%{
background-size: 100% 32%;}
30%, 70%{
background-size: 100% 18%;}
50%{
background-size: 100% 16%;} }
thanks for this
ReplyDelete