Beispielcode zum Zeichnen schöner kreisförmiger Muster mit reinem CSS

Ich habe Ihnen einmal eine sehr clevere Technik zum Zeichnen von Dreiecken mit reinem CSS vorgestellt (siehe verwandten Artikel). Im letzten Jahr habe ich festgestellt, dass diese Technik des Zeichnens von Dreiecken mit CSS sehr nützlich und effizient ist, insbesondere für die Erstellung von Tooltips/Eingabeaufforderungen und ähnlichen Webeffekten.

Eine weitere Form, die sich ebenfalls einfach per CSS umsetzen lässt, ist der Kreis. Mit border-radius können Sie verschiedene schöne kreisförmige Muster zeichnen.

CSS-Code

Ändern Sie einfach den Randradius jeder Seite Ihres Webelements auf sogar 50 % und Sie können es tun Holen Sie sich einen Kreis beliebiger Größe:

Der Code lautet wie folgt:

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

Das ist zwar sehr einfach, aber wir können der Verwendung von CSS-Verlaufsfarben nicht widerstehen darauf. Und die Versuchung der Grundrotation Animation : :

Der Code lautet wie folgt:

/* 动画定义 */
@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, das ist das schöner CSS-Kreis!

Die Technik, Kreise mit CSS zu zeichnen, mag auf den ersten Blick nicht so nützlich erscheinen wie die Technik, Dreiecke mit CSS zu zeichnen, hat aber dennoch ihren Wert für die Seitengestaltung. Sie können animierte Kreise verwenden, um den Ladevorgang der Seite darzustellen. Die Verwendung hängt von Ihrer Kreativität ab. Habt ihr gute Ideen?

Das obige ist der detaillierte Inhalt vonBeispielcode zum Zeichnen schöner kreisförmiger Muster mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!