Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS3 border-radius, um Tai Chi- und Liebesmuster zu zeichnen
Verwenden Sie CSS3 border-radius, um Tai Chi- und Liebesmuster zu zeichnen
- 不言Original
- 2018-06-26 15:20:482221Durchsuche
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;
}Will~ Ist das nicht erstaunlich! ? 
Liebe
Im Folgenden erfahren Sie, wie Sie den Randradius zum Zeichnen von Tai-Chi-Diagrammen verwenden Eckeffekt auch.
<body> <p class="heart"></p> </body>Dann geben Sie die Breite und Höhe des Blocks an:
.heart {
position: relative;
width: 140px;
height: 115px;
}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;
} Da nur die oberen linken und oberen rechten abgerundeten Ecken festgelegt sind, wird daraus eine Säule mit rundem Kopf: 
.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;
}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: 
.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;
}Wenn beide Seiten generiert sind, erscheint ein leuchtend rotes Herz: 
.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);
}
}Transparente Verwendung transform's scale(x, y), um die Größe des Herzens zu ändern, sodass die gesamte Animation wie ein knallender Sprung aussieht: 
Ü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!