Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)

坏嘻嘻
Freigeben： 2018-09-26 09:59:21
Original
7767 Leute haben es durchsucht

Mit der weit verbreiteten Anwendung von CSS3 durchsuchen Menschen immer vielfältigere Webseiten und Front-End-Entwickler legen immer mehr Wert auf die Mensch-Computer-Interaktion und das Benutzererlebnis. Vom Text am Anfang über die Bilder später bis hin zu den aktuellen Animationsspezialeffekten werden die Leute bei Webseiten immer wählerischer. Deshalb zeige ich Ihnen heute, wie Sie mit CSS3 eine Rotationsanimation erstellen. In diesem Artikel wird die Verwendung von CSS3 zum Erstellen von Rotationsanimationen vorgestellt und der Schwerpunkt auf die einzelnen Schritte gelegt. Der Inhalt dieses Artikels ist kompakt und ich hoffe, dass Sie etwas daraus gewinnen können.

Das Beispiel ist im Bild dargestellt

So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)

Verwenden von CSS3 zum Erstellen Rotationsanimation Idee

Zuerst müssen wir div verwenden, um diese 8 Symbole zu zeichnen. Durch Beobachtung können wir feststellen, dass die 8 Symbole in 4 Gruppen von Divs unterteilt werden können, und der Kreis kann sein in 8 gleiche Teile unterteilt, was unsere nachfolgenden Operationen erleichtern kann. Ich füge zwei vertikal entsprechende Kreise in dasselbe Div ein. Um sie zu drehen, muss ich das Rotationsattribut in CSS3 verwenden: Das erste Div bleibt stationär, das zweite Div wird um 45° gedreht und so weiter ° mehr als das vorherige div, um ein Layout zu erreichen.

Schritte zum Erstellen einer Rotationsanimation mit CSS3

Schritt 1: Zeichnen Sie 8 Symbole und teilen Sie sie in 4 Divs ein 

<div class="out_circle">
    <div class="slide"></div>
    <div class="nav_circle r1">
        <div class="img_top img">
            <img  src="images/menu.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">产品中心</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_01.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">官方网站</a>
        </div>
    </div>
    <div class="nav_circle r2">
        <div class="img_top img">
            <img  src="images/menu_02.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">代理查询</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_03.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">后台登录</a>
        </div>
    </div>
    <div class="nav_circle r3">
        <div class="img_top img">
            <img  src="images/menu_04.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">公司资质</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_05.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">质检报告</a>
        </div>
    </div>
    <div class="nav_circle r4">
        <div class="img_top img">
            <img  src="images/menu_06.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">代理登录</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_07.png" alt="So erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang)" >
            <a href="#">代理授权</a>
        </div>
    </div>
</div>
Nach dem Login kopieren

Schritt 2: CSS3-Layout verwenden

 .out_circle{
            width:440px;
            height:440px;
            border:1px solid;
            border-radius:50%; 
            margin:30px auto 0 auto;
            position: relative;
            }
            .nav_circle{
            width:110px;
            height:440px;
            float:left;
            position:absolute;
            top:0;
            left:169px; 
            text-align:center;
            }
            .img_top{
            top:-27px;
            -webkit-transform: rotate(0deg);
        }
        .img_bottom{
            top:316px;
            -webkit-transform: rotate(0deg);
        }
        .img_top img,.img_bottom  img{
            width:77px;
            height: 77px;
        }
         .img_top,.img_bottom{
            position: relative;
            z-index:1;
        }
        .nav_circle .img a{
            position: absolute;
            top:10px;
            left:94px;
            width: 52px;
        }
        .r1{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation: rotate 10s linear infinite;
            -webkit-animation:rotate 10s linear infinite;
            -moz-animation:rotate 10s linear infinite;
            -o-animation:rotate 10s linear infinite;
        }
        .r1 .img{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation:rotate_c1 10s linear infinite;
            -webkit-animation:rotate_c1 10s linear infinite;
        }
        .r2{
            transform:rotate(45deg) skew(0deg) scale(1);
            -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(45deg) skew(0deg) scale(1); 
            animation: rotatef 10s linear infinite;
            -webkit-animation:rotatef 10s linear infinite;
            -moz-animation:rotatef 10s linear infinite;
            -o-animation:rotatef 10s linear infinite;
        }
        .r2 .img {
            transform:rotate(-45deg) skew(0deg) scale(1);
            -ms-transform:rotate(-45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-45deg) skew(0deg) scale(1); 
            animation:rotate_c2 10s linear infinite;
            -webkit-animation:rotate_c2 10s linear infinite;
        }
        .r3 {
            transform:rotate(90deg) skew(0deg) scale(1);
            -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(90deg) skew(0deg) scale(1);
            animation: rotates 10s linear infinite;
            -webkit-animation:rotates 10s linear infinite;
            -moz-animation:rotates 10s linear infinite;
            -o-animation:rotates 10s linear infinite;
        }
        .r3 .img{
            transform:rotate(-90deg) skew(0deg) scale(1);
            -ms-transform:rotate(-90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-90deg) skew(0deg) scale(1); 
            animation:rotate_c3 10s linear infinite;
            -webkit-animation:rotate_c3 10s linear infinite;
        }
        .r4{
            transform:rotate(135deg) skew(0deg) scale(1);
            -ms-transform:rotate(135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(135deg) skew(0deg) scale(1); 
            animation: rotatet 20s linear infinite;
            -webkit-animation:rotatet 10s linear infinite;
            -moz-animation:rotatet 10s linear infinite;
            -o-animation:rotatet 10s linear infinite;
        }
        .r4 .img{
            transform:rotate(-135deg) skew(0deg) scale(1);
            -ms-transform:rotate(-135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-135deg) skew(0deg) scale(1); 
            animation:rotate_c4 10s linear infinite;
            -webkit-animation:rotate_c4 10s linear infinite;
        }
Nach dem Login kopieren

Schritt 3: Erstellen Animation für jedes Div

erste Div

@keyframes rotate{
            0%{
                transform:rotate(0deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(0deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(360deg) skew(0deg) scale(1);
                -ms-transform:rotate(360deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(360deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(360deg) skew(0deg) scale(1); 
            }
        }
Nach dem Login kopieren

zweite Div

@keyframes rotatef{
            0%{
                transform:rotate(45deg) skew(0deg) scale(1);
                -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(45deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(405deg) skew(0deg) scale(1);
                -ms-transform:rotate(405deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(405deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(405deg) skew(0deg) scale(1); 
            }
        }
Nach dem Login kopieren

Das dritte Div

@keyframes rotates{
            0%{
                transform:rotate(90deg) skew(0deg) scale(1);
                -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(90deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(450deg) skew(0deg) scale(1);
                -ms-transform:rotate(450deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(450deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(450deg) skew(0deg) scale(1); 
            }
        }
Nach dem Login kopieren

Das vierte Div

@keyframes rotatet{
            0%{
                transform:rotate(135deg) skew(0deg) scale(1);
                -ms-transform:rotate(135deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(135deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(135deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(495deg) skew(0deg) scale(1);
                -ms-transform:rotate(495deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(495deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(495deg) skew(0deg) scale(1); 
            }
        }
Nach dem Login kopieren

Hinweis

Da das Rotationsattribut von CSS3 nicht mit allen Browsern kompatibel ist, müssen Sie nach der Erstellung der entsprechenden Klasse einen Animationsnamen hinzufügen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 eine kreisförmige Rotationsanimation (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
css3 旋转动画
Quelle：php.cn
Vorheriger Artikel：Einführung in die Pointer-Events-Eigenschaft in CSS3 Nächster Artikel：Detaillierte grafische Erläuterung der vier Darstellungsmethoden von Farben in CSS
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Automatische PX-Konvertierung in REM-Fehler  <style>html {  font-size: calc(100vw / 3.75);      }body {    Schriftgröße: 0,16rem...
Aus 2024-04-16 09:34:16
0
0
4687
Warum unterbricht das Weglassen von 0 ms Schlaf meine CSS-Übergänge? Ich versuche, eine FLIP-Animation zu implementieren, um zu sehen, ob ich sie richtig verst...
Aus 2024-04-06 16:29:50
0
2
490
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Die Bild-Hover-Card-Animation mit CSS Tailwind funktioniert nicht wie erwartet. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
Aus 2024-04-06 13:43:17
0
1
356
Reduzieren Sie die Deckkraft des Scroll-Hintergrundbilds und begrenzen Sie die minimale Deckkraft Ich versuche, das Hintergrundbild so zu gestalten, dass die Deckkraft beim Scrollen und au...
Aus 2024-04-04 23:50:53
0
1
1329
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage