Der Randradius in CSS3 kann problemlos zum Zeichnen von Bögen verwendet werden. Wenn er nur zum Erstellen abgerundeter Rechtecke verwendet wird, wäre dies zu verschwenderisch. Hier ist ein Beispiel für die Verwendung des Randradius von CSS3 zum Zeichnen von Tai Chi Liebesmuster. Freunde, die es brauchen, können sich auf
Tai Chi-Diagramm
Rahmenradius beziehen, wenn Sie es zum Zeichnen von Illustrationen verwenden kann tatsächlich eine Wirkung haben. So viele verschiedene Ideen. Der Autor wird es auch heute noch verwenden, um Ihnen das Zeichnen von Tai-Chi-Bildern beizubringen.
Quellcode HTML anzeigen
<body>
<p class="taichi">
<p class="white-circle"></p>
<p class="black-circle"></p>
</p>
</body>
Nach dem Login kopieren
Da es im Tai Chi-Diagramm einen schwarzen und einen weißen Kreis gibt, werden zwei weitere Ps in den Block eingefügt.
Dann öffnen Sie bitte Ihre Augen und schauen Sie genau hin. Ich werde den großen Block zunächst in einen weißen und einen schwarzen aufteilen:
Sehen Sie sich den Quellcode CSS an
.taichi {
position: relative;
width: 48px; /* 50 - 2 */
height: 96px; /* 100 - 2 - 2 */
background: #fff;
border: 2px solid #000;
border-width: 2px 50px 2px 2px;
border-radius: 50%;
}Nach dem Login kopieren
Der allgemeine Box-Modus (Box-Modell) wird zusammen mit der Breite und Höhe des Blocks sowie der Randbreite berechnet. Wir möchten also einen Block mit einer Breite und Höhe von 100 x 100 erstellen, aber wenn die Randbreite 2 Pixel beträgt, dann Der Teil darin sollte nur 96 Pixel groß sein. Das Besondere ist, dass der Autor die Breite des rechten Randes direkt auf 50 Pixel festlegt, sodass die Breite innerhalb des Blocks nur 48 Pixel benötigt.
Wenn dies eingestellt ist und der Effekt mit abgerundeten Ecken mit Randradius hinzugefügt wird, wird daraus~
Hey~, dann gibt es bereits einen schwarzen und einen weißen Block Fügen Sie zuerst einen weißen Kreis hinzu:
Quellcode CSS anzeigen
.white-circle {
position: absolute;
top: 0;
left: 50%;
background: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
}Nach dem Login kopieren
Hier wird direkt ein vollständiger weißer Kreis generiert und in der Mitte der oberen Hälfte platziert:
Der schwarze Kreis befindet sich in der unteren Hälfte:
Sehen Sie sich den CSS-Quellcode an
.black-circle {
position: absolute;
top: 50%;
left: 50%;
background: #000;
border-radius: 50%;
width: 48px;
height: 48px;
}Nach dem Login kopieren
Es sieht so aus, als wären bereits 9 Bilder vorhanden~
Schließlich gibt es in diesen beiden Kreisen zwei kleine Punkte mit entgegengesetzten Farben. Für diese beiden kleinen Punkte müssen wir nur ::nach Pseudoelementen (Pseudoelemente) verwenden
Quellcode-CSS anzeigen
.white-circle::after {
content: "";
position: absolute;
top: 17px; /* (50-16)/2 */
left: 17px; /* (50-16)/2 */
background: #000;
border-radius: 50%;
width: 16px;
height: 16px;
}
.black-circle::after {
content: "";
position: absolute;
top: 17px; /* (50-16)/2 */
left: 17px; /* (50-16)/2 */
background: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
}Nach dem Login kopieren
Will~ Ist das nicht erstaunlich! ?
Liebe
Im Folgenden erfahren Sie, wie Sie den Randradius zum Zeichnen von Tai-Chi-Diagrammen verwenden Eckeffekt auch.
Wir brauchen nur einen p-Block:
<body>
<p class="heart"></p>
</body>
Nach dem Login kopieren
Dann geben Sie die Breite und Höhe des Blocks an:
Quellcode-CSS anzeigen
.heart {
position: relative;
width: 140px;
height: 115px;
}Nach dem Login kopieren
Der Dieselbe Methode besteht darin, das Herz in den linken und rechten Block zu unterteilen, und dieselbe Methode besteht darin, die ::before-Pseudoelemente (Pseudoelemente) zu verwenden, um den linken Block zu generieren:
Sehen Sie sich den CSS-Quellcode an
.heart::before {
content: "";
position: absolute;
left: 70px;
top: 0;
width: 70px;
height: 115px;
background: red;
border-radius: 50px 50px 0 0;
}Nach dem Login kopieren
Da nur die oberen linken und oberen rechten abgerundeten Ecken festgelegt sind, wird daraus eine Säule mit rundem Kopf:
Dann muss ich ihre Drehung ändern Mittelpunkt, um es in Richtung 45 Grad nach links drehen:
Quellcode CSS anzeigen
.heart::before {
content: "";
position: absolute;
left: 70px;
top: 0;
width: 70px;
height: 115px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: left bottombottom;
-moz-transform-origin: left bottombottom;
-o-transform-origin: left bottombottom;
transform-origin: left bottombottom;
}Nach dem Login kopieren
transform-origin kann den Mittelpunkt des Elements ändern. Wie die Hintergrundposition akzeptiert es zwei Werte: Der erste dient zum Festlegen des horizontalen Werts und der zweite zum Festlegen des vertikalen Werts. Die Standardeinstellung ist Mitte Mitte, jetzt ändere ich sie nach unten links:
Der rechte Teil ist derselbe, aber nur der Drehmittelpunkt wird nach unten rechts geändert. und nach rechts drehen:
Quellcode-CSS anzeigen
.heart::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 115px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: rightright bottombottom;
-moz-transform-origin: rightright bottombottom;
-o-transform-origin: rightright bottombottom;
transform-origin: rightright bottombottom;
}Nach dem Login kopieren
Wenn beide Seiten generiert sind, erscheint ein leuchtend rotes Herz:
Was~ Herr Zhong aus Zhonghe fragte, warum er sich nicht bewegen könne ... Egal, fügen Sie einen Animationseffekt hinzu:
Quellcode-CSS anzeigen
.heart {
-webkit-animation: jump 1s infinite ease-out;
-moz-animation: jump 1s infinite ease-out;
-o-animation: jump 1s infinite ease-out;
animation: jump 1s infinite ease-out;
}
@-webkit-keyframes jump {
0%, 60%, 75%, 90%, 100% {
-webkit-transform: scale(1);
}
15% {
-webkit-transform: scale(0.6);
}
30% {
-webkit-transform: scale(1);
}
45% {
-webkit-transform: scale(0.7);
}
}
@-moz-keyframes jump {
0%, 60%, 75%, 90%, 100% {
-moz-transform: scale(1);
}
15% {
-moz-transform: scale(0.6);
}
30% {
-moz-transform: scale(1);
}
45% {
-moz-transform: scale(0.7);
}
}
@-o-keyframes jump {
0%, 60%, 75%, 90%, 100% {
-o-transform: scale(1);
}
15% {
-o-transform: scale(0.6);
}
30% {
-o-transform: scale(1);
}
45% {
-o-transform: scale(0.7);
}
}
@keyframes jump {
0%, 60%, 75%, 90%, 100% {
transform: scale(1);
}
15% {
transform: scale(0.6);
}
30% {
transform: scale(1);
}
45% {
transform: scale(0.7);
}
}Nach dem Login kopieren
Transparente Verwendung transform's scale(x, y), um die Größe des Herzens zu ändern, sodass die gesamte Animation wie ein knallender Sprung aussieht:
Das Obige ist der gesamte Artikelinhalt, I Ich hoffe, es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Über die Verwendung von Fenstereinheiten und Prozenteinheiten in CSS
So implementieren Sie benutzerdefinierte „W „in CSS3“ geformte Laufschiene
Verwendung von CSS3, um den blinkenden Effekt einer Textschleife nach rechts zu erzielen
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3 border-radius, um Tai Chi- und Liebesmuster zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
