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>
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%;
}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;
}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;
}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;
}
Liebe
Im Folgenden erfahren Sie, wie Sie den Randradius zum Zeichnen von Tai-Chi-Diagrammen verwenden Eckeffekt auch.
<body> <p class="heart"></p> </body>
.heart {
position: relative;
width: 140px;
height: 115px;
}.heart::before {
content: "";
position: absolute;
left: 70px;
top: 0;
width: 70px;
height: 115px;
background: red;
border-radius: 50px 50px 0 0;
}
.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;
}
.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;
}
.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);
}
}
Ü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!
