Maison > Article > interface Web > Comment utiliser du CSS pur pour obtenir un effet de chargement en forme de losange (code source ci-joint)
Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet de chargement de diamant (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous. .
https://github.com/comehope/front-end-daily -défis
Définir dom, un conteneur contient 9 sous-éléments :
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
Affichage centré :
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
Définir le conteneur La taille du sous-élément est un grand carré contenant 9 petits carrés :
.loader { width: 10em; height: 10em; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em; }
Ajuster le motif à un grand losange contenant 9 petits losanges :
.loader { transform: rotate(45deg); }
verticalement Utiliser un petit losange comme unité, coloriez le petit bloc losange :
.loader span { background-color: var(--c); } .loader span:nth-child(7) { --c: tomato; } .loader span:nth-child(4), .loader span:nth-child(8) { --c: gold; } .loader span:nth-child(1), .loader span:nth-child(5), .loader span:nth-child(9) { --c: limegreen; } .loader span:nth-child(2), .loader span:nth-child(6) { --c: dodgerblue; } .loader span:nth-child(3) { --c: mediumpurple; }
Définissez l'effet d'animation :
.loader span { animation: blinking 2s linear infinite; animation-delay: var(--d); transform: scale(0); } @keyframes blinking { 0%, 100% { transform: scale(0); } 40%, 80% { transform: scale(1); } }
Enfin, réglez le délai du petit losange pour améliorer la dynamique :
.loader span:nth-child(7) { --d: 0s; } .loader span:nth-child(4), .loader span:nth-child(8) { --d: 0.2s; } .loader span:nth-child(1), .loader span:nth-child(5), .loader span:nth-child(9) { --d: 0.4s; } .loader span:nth-child(2), .loader span:nth-child(6) { --d: 0.6s; } .loader span:nth-child(3) { --d: 0.8s; }
Fait !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!