Heim >Web-Frontend >CSS-Tutorial >CSS3 implementiert Neigungs- und Rotationsanimationseffekte
CSS3 implementiert Neigungs- und Rotationsanimationseffekte
- php中世界最好的语言Original
- 2018-03-22 17:49:256017Durchsuche
Dieses Mal werde ich Ihnen den CSS3-Neigungs- und Rotationseffekt vorstellen Schauen Sie einmal vorbei.
Schauen Sie sich zunächst die Wirkung vonstatisch an, die Wirkung wird nach dem Laufen besser sein
<!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!