简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  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:482171Durchsuche

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~
2016517110833210.png (120×120)

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:
2016517110925477.png (120×120)

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~
2016517110953720.png (120×120)

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! ?


2016517111042392.png (120×120)

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>

Dann geben Sie die Breite und Höhe des Blocks an:


Quellcode-CSS anzeigen

.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:


2016517111117036.png (200×200)

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;   
}

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:


2016517111144455.png (200×200)

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;   
}

Wenn beide Seiten generiert sind, erscheint ein leuchtend rotes Herz:


2016517111209126.png (200×200)

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);   
 }   
}

Transparente Verwendung transform's scale(x, y), um die Größe des Herzens zu ändern, sodass die gesamte Animation wie ein knallender Sprung aussieht:


2016517111241939.gif (200×200)

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!

php css css3 html 循环 position border background transform animation
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Informationen zur Verwendung von Fenstereinheiten und Prozenteinheiten in CSSNächster Artikel：Informationen zur Verwendung von Fenstereinheiten und Prozenteinheiten in CSS

In Verbindung stehende Artikel

Mehr sehen