Heim > Artikel > Web-Frontend > CSS3 implementiert Neigungs- und Rotationsanimationseffekte

CSS3 implementiert Neigungs- und Rotationsanimationseffekte

php中世界最好的语言Original: 2018-03-22 17:49:255954Durchsuche

Dieses Mal werde ich Ihnen den CSS3-Neigungs- und Rotationseffekt vorstellen Schauen Sie einmal vorbei.

Schauen Sie sich zunächst die Wirkung von

statisch an, die Wirkung 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>

I Ich glaube, Sie werden den Fall in diesem Artikel lesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Links fixiert und rechts adaptives Layout
Wasserfall-Flow-Layout und unendlich ladender Fotoalbum-Effekt

IE-kompatible Lösung für Deckkraft-Transparenzfilter

Das obige ist der detaillierte Inhalt vonCSS3 implementiert Neigungs- und Rotationsanimationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Der Standardabstand von Inline-Block-Elementen wurde gelöschtNächster Artikel：Der Standardabstand von Inline-Block-Elementen wurde gelöscht

In Verbindung stehende Artikel

Mehr sehen