Heim > Artikel > Web-Frontend > So erzielen Sie in CSS3 gleichzeitige Neigungs- und Rotationsanimationseffekte

So erzielen Sie in CSS3 gleichzeitige Neigungs- und Rotationsanimationseffekte

不言Original: 2018-06-26 15:29:142054Durchsuche

In diesem Artikel wird hauptsächlich anhand von Beispielcode erläutert, wie Sie mithilfe von CSS3 den Animationseffekt des Kippens und Drehens gleichzeitig erzielen. Den vollständigen Beispielcode finden Sie im Artikel. Freunde in Not Wir können daraus lernen, schauen wir uns das unten an.

Sehen Sie sich zuerst den statischen Effekt an, der Effekt wird nach dem Laufen besser sein

Der Beispielcode lautet wie folgt

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
 <title>css3学习</title>
 <style type="text/css">
 .d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
  -webkit-animation:abc 2s infinite linear; 
  animation:abc 2s infinite linear; 
 }
 /*chrome,Safari,ff,o测试没问题，IE11一闪一闪的*/
 @keyframes abc{
  0% {transform:skew(20deg) rotate(0deg);} 
    50% {transform:skew(20deg) rotate(180deg);} 
    100% {transform:skew(20deg) rotate(360deg);} 
 }
 @-webkit-keyframes abc{
  0% {-webkit-transform:skew(20deg) rotate(0deg);} 
    50% {-webkit-transform:skew(20deg) rotate(180deg);} 
    100% {-webkit-transform:skew(20deg) rotate(360deg);} 
 }
 </style>
</head>
<body>
 <p id="abc" class="d"></p>
</body>
</html>

Das Obige ist der Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden Sie CSS3-Randradius, um Tai Chi und Liebesmuster zu zeichnen

Verwenden Sie CSS3, um Text zu realisieren Code für Lichteffekt

Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS3 gleichzeitige Neigungs- und Rotationsanimationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css3 border

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：So erstellen Sie mit CSS3 eine 0,5 Pixel dünne LinieNächster Artikel：So erstellen Sie mit CSS3 eine 0,5 Pixel dünne Linie

In Verbindung stehende Artikel

Mehr sehen