Une animation pour la nouvelle année en HTML / CSS !

A la veille de la nouvelle année, Mark Boots nous propose sur la plateforme CodePen un code générant une animation en HTML/CSS pour la nouvelle année.

Source : https://codepen.io/MarkBoots/pen/raBzNZp

Télécharger le fichier

Vous pouvez obtenir le fichier en cliquant sur le lien suivant : Bonne annee 2025. (clic droit sur le lien, puis enregistrer sous)

Le code HTML : 

<div class= »number » style= »–digits: 4″>
<span class= »digit two » style= »–digit: 0″><i></i><i></i><i></i><i></i><i></i><i></i></span>
<span class= »digit zero » style= »–digit: 1″><i></i><i></i><i></i><i></i><i></i><i></i></span>
<span class= »digit two » style= »–digit: 2″><i></i><i></i><i></i><i></i><i></i><i></i></span>
<span class= »digit five » style= »–digit: 3″><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>

Le code CSS :

@property –bg-fill {
syntax: « <number> »;
initial-value: 0;
inherits: true;
}
.number{
display: grid;
grid-auto-flow: column;
width: 540px;
gap: 20px;
–duration: 3s;
filter: drop-shadow(0 0 10px black);

> .digit{
aspect-ratio: 2/3;
width: 100%;
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr;

> i {
–bgc1: hsl(calc(360 / (var(–digits) * 6) * ((var(–digit) * 6 ) + var(–i))) 70% 50%);
–bgc2: transparent;
–anim-dur: calc(var(–duration) / 6);
–anim-delay: calc(var(–i) * var(–anim-dur));
border-radius:
calc(100% * var(–tl, 0))
calc(100% * var(–tr, 0))
calc(100% * var(–br, 0))
calc(100% * var(–bl, 0));
background-image: var(–bgi);
animation: bg-fill var(–anim-dur) linear forwards var(–anim-delay);

–cg: var(–bgc1) calc(var(–bg-fill, 0) * 25%), var(–bgc2) 0;
–ctr: conic-gradient(from 0deg at 0% 100%, var(–cg));
–crb: conic-gradient(from 90deg at 0% 0%, var(–cg));
–cbl: conic-gradient(from 180deg at 100% 0%, var(–cg));
–clt: conic-gradient(from 270deg at 100% 100%, var(–cg));
–crt: conic-gradient(from calc( 90deg – 90deg * var(–bg-fill, 0)) at 0% 100%, var(–cg));
–cbr: conic-gradient(from calc(180deg – 90deg * var(–bg-fill, 0)) at 0% 0%, var(–cg));
–clb: conic-gradient(from calc(270deg – 90deg * var(–bg-fill, 0)) at 100% 0%, var(–cg));
–ctl: conic-gradient(from calc(360deg – 90deg * var(–bg-fill, 0)) at 100% 100%, var(–cg));
–lg: var(–bgc1) calc(100% * var(–bg-fill, 0)), var(–bgc2) 0;
–lbt: linear-gradient( 0deg, var(–lg));
–llr: linear-gradient( 90deg, var(–lg));
–ltb: linear-gradient( 180deg, var(–lg));
–lrl: linear-gradient( 270deg, var(–lg));
}
&.two > i{
&:nth-child(1) { –i: 0; –bgi: var(–clt); –tl: 1 }
&:nth-child(2) { –i: 1; –bgi: var(–ctr); –tr: 1 }
&:nth-child(3) { –i: 3; –bgi: var(–ctl); –tl: 1 }
&:nth-child(4) { –i: 2; –bgi: var(–crb); –br: 1 }
&:nth-child(5) { –i: 4; –bgi: var(–clb); }
&:nth-child(6) { –i: 5; –bgi: var(–llr); }
}
&.zero > i {
&:nth-child(1) { –i: 0; –bgi: var(–ctl); –tl: 1 }
&:nth-child(2) { –i: 5; –bgi: var(–crt); –tr: 1 }
&:nth-child(3) { –i: 1; –bgi: var(–ltb); }
&:nth-child(4) { –i: 4; –bgi: var(–lbt); }
&:nth-child(5) { –i: 2; –bgi: var(–clb); –bl: 1 }
&:nth-child(6) { –i: 3; –bgi: var(–cbr); –br: 1 }
}
&.five > i{
&:nth-child(1) { –i: 4; –bgi: var(–clt); }
&:nth-child(2) { –i: 5; –bgi: var(–cbr); –br: 1 }
&:nth-child(3) { –i: 3; –bgi: var(–cbl); –bl: 1 }
&:nth-child(4) { –i: 2; –bgi: var(–crt); –tr: 1 }
&:nth-child(5) { –i: 0; –bgi: var(–llr); }
&:nth-child(6) { –i: 1; –bgi: var(–cbr); –br: 1 }
}
}
}

@keyframes bg-fill { to { –bg-fill: 1 } }

body {
margin: 0;
padding: 2rem;
box-sizing: border-box;
height: 100vh;
display: grid;
place-items: center;
background: url(‘https://images.pexels.com/photos/167080/pexels-photo-167080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1’) center / cover #1d1e22;
position: relative;
&::after{
content: «  »;
position: absolute;
inset: 0;
background: hsl(0 0 0 / .1);
backdrop-filter: blur(10px);
z-index: -1;
}
}

A vous de jouer !