Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ausführliche Erläuterung eines einfachen Implementierungsbeispiels für den CSS-Rotationsanimationseffekt

高洛峰
Freigeben: 2017-03-03 16:55:45
Original
2349 Leute haben es durchsucht

Wir können Animationseffekte über CSS erstellen. Im Folgenden werde ich die Drehung von p und die Animation des Farbübergangs demonstrieren.

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    a{       
        text-align:center;   
        line-height:100px;   
        transition:all 2s;   
        width:100px;   
        height:100px;   
        background:pink;   
        float:left;   
        border-radius:50%;   
    }   
    a:hover{   
        transition:all 2s;   
        background:red;   
        transform-origin:50 100;   
        transform:rotate(360deg);   
        border-radius:50%;   

    }   
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上:</h1>
<a>
    两秒旋转360   
</a>
</body>
</html>
Nach dem Login kopieren

Testen Sie den Effekt selbst. Sehr wunderschön!

Der obige Artikel über die einfache Implementierung des CSS-Rotationsanimationseffekts ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Ausführlichere Beispiele für einfache Implementierungen von CSS-Rotationsanimationseffekten finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage