Heim > Artikel > Web-Frontend > Ausführliche Erläuterung eines einfachen Implementierungsbeispiels für den CSS-Rotationsanimationseffekt

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

高洛峰Original: 2017-03-03 16:55:452301Durchsuche

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>

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!

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：Zusammenfassende Einführung in den CSS-HintergrundNächster Artikel：Zusammenfassende Einführung in den CSS-Hintergrund

In Verbindung stehende Artikel

Mehr sehen