Cet article présente principalement comment utiliser du CSS pur pour obtenir l'effet de perroquet de dessin animé. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer
<p> </p><p></p> <p></p> <p></p>
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: darkslategray; }
.parrot { width: 10em; height: 10em; font-size: 30px; }
.parrot { position: relative; display: flex; align-items: center; justify-content: center; } .parrot .outer { position: absolute; width: 100%; height: 100%; border: 1em solid; border-color: transparent transparent orangered tomato; border-radius: 50%; }
.parrot .middle { position: absolute; width: 80%; height: 80%; border: 4em solid; border-color: gold transparent gainsboro white; border-radius: 50%; }
.parrot .inner { position: absolute; width: 40%; height: 40%; border: 2em solid; border-color: transparent orange transparent transparent; border-radius: 50%; }
.parrot .inner::before { content: ''; position: absolute; width: 1em; height: 1em; background-color: black; border-radius: 50%; left: -2em; top: -0.5em; }
.parrot > * { transform: rotate(45deg); }
.parrot > * { transition: 0.5s; } .parrot:hover .outer { transform: rotate(225deg); border-color: transparent transparent tomato orangered; } .parrot:hover .middle { transform: rotate(calc(225deg - 360deg)); border-color: transparent gold white gainsboro; } .parrot:hover .inner { transform: rotate(135deg); }
.parrot:hover .outer { border-color: transparent transparent lightseagreen darkcyan; } .parrot:hover .middle { border-color: transparent gold white gainsboro; } .parrot:hover .inner { border-color: transparent orange transparent transparent; }
Comment utiliser CSS pour implémenter l'effet d'un chargeur de treillis à élément unique
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!