Exemple de code pour dessiner de magnifiques motifs circulaires en utilisant du CSS pur

J'ai un jour partagé avec vous une technique très astucieuse pour dessiner des triangles en utilisant du CSS pur (voir article associé). Au cours de la dernière année, j’ai trouvé cette technique de dessin de triangles avec CSS très utile et efficace, en particulier pour créer des info-bulles/invites et des effets Web similaires.

Une autre forme qui peut également être facilement implémentée en utilisant CSS est le cercle. En utilisant border-radius, vous pouvez dessiner divers beaux motifs circulaires.

Code CSS

Changez simplement le rayon de bordure de chaque côté de votre élément Web à même 50 % et vous pouvez obtenez un cercle de n'importe quelle taille :

Le code est le suivant :

.circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* 宽度和高度需要相等 */
}

C'est effectivement très simple, mais on ne peut pas résister à l'utilisation de couleurs dégradées CSS dessus. Et la tentation de la rotation basique animation :

Le code est le suivant :

/* 动画定义 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}</p> <p>/* 旋转，渐变色 */
#advanced {
width: 200px;
height: 200px;</p> <p> background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);</p> <p> animation-name: spin; 
animation-duration: 3s; /* 3 seconds */
animation-iteration-count: infinite; 
animation-timing-function: linear;
}

Wow, c'est ça. beau cercle CSS!

La technique consistant à dessiner des cercles avec CSS peut ne pas sembler aussi utile que la technique consistant à dessiner des triangles avec CSS à première vue, mais elle a toujours sa valeur dans la conception de pages. Vous pouvez utiliser des cercles animés pour représenter le chargement... lorsque la page est en cours de chargement. Son utilisation dépend de votre créativité. Avez-vous de bonnes idées ?

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!