CSS3-Implementierung des Beispielcodes für eine niedliche Minion-Animation-CSS-Tutorial-php.cn

Jedes Mal, wenn ich CSS3-Animationen sehe, möchte ich es versuchen. Ich erinnere mich, dass ich vor mehr als einem Monat einen Blog von Bruder Bai Shu gelesen habe und plötzlich eine Idee hatte, also habe ich die von ihm bereitgestellte Demo ausprobiert fühlte sich großartig an! Das Bild unten zeigt den von der Demo bereitgestellten Designentwurf für den Animationsrahmen.

CSS3-Implementierung des Beispielcodes für eine niedliche Minion-Animation

Ich möchte auch eine DIY-Animation erstellen, aber zu wissen, dass PS nicht unbedingt bedeutet, dass ich sie nicht entwerfen kann Animationsdesign-Entwürfe. [Verrückt]… Also ging ich zu Zoku.com, um nach Materialien zu suchen, und am Ende fand ich nur ein Bild:

CSS3-Implementierung des Beispielcodes für eine niedliche Minion-Animation

Ich denke, dass ich eine CSS3-Animation machen möchte, haha... was soll ich tun? - Auf keinen Fall, es gefällt mir einfach! (Hier nicht sprühen, da ist wirklich kein Material)

...Der Endeffekt sieht so aus, das ist ein Beispiel auf dem mobilen Endgerät! (Das GIF bleibt hängen, also schauen Sie es sich bitte einfach an, sprühen Sie es nicht, wenn es Ihnen nicht gefällt...):

CSS3-Implementierung des Beispielcodes für eine niedliche Minion-Animation

OK, in der Tat, das Hauptzweck ist das Erlernen von Wissenspunkten:

Die in dieser Demo beteiligten Wissenspunkte sind:

Perspektive

Perspektive-Ursprung

transform- style

transform-origin

animation

@keyframes

Translate3d, Translate ://m.sbmmt.com/

Zurück zu diesem Fall: Wie wurde solch eine frustrierende Animation implementiert? Ich werde den Code zum Üben mit Ihnen teilen:

HTML-Struktur:

<body>  
    <p class="title">  
        <p>小黄人</p>  
    </p>  
    <p class="wrapper">  
        <p class="littleH">  
            <p class="light">  
                <p class="light_left">  
                    <p>欢迎欢迎，热烈欢迎</p>  
                </p>  
                <p class="light_right">  
                    <p>欢迎欢迎，热烈欢迎</p>  
                </p>  
                <p class="load"></p>  
            </p>  
            <p class="littleH_body">  
                <p class="leftHair"></p>  
                <p class="rightHair"></p>  
                <p class="leftBlackeye"></p>  
                <p class="leftWhiteeye"></p>  
                <p class="rightBlackeye"></p>  
                <p class="rightWhiteeye"></p>  
                <p class="mouse"></p>  
                <p class="leftFoot"></p>  
                <p class="rightFoot"></p>  
            </p>  
        </p>  
    </p>  
</body>

Nach dem Login kopieren

CSS-Code:

body{   
            margin: 0;   
            padding: 0;   
            width: 100%;   
            height: 100%;   
        }   
        .title p{   
            text-align: center;   
            font-size: 100px;   
            font-weight: bolder;   
            color:#333;   
        }   
        .wrapper{   
            margin: 400px auto;   
        }   
        .littleH{   
            position: relative;   
            -webkit-perspective: 800;   
            -webkit-perspective-origin: 50% 50%;   
        }   
        .light{   
            -webkit-transform-style: preserve-3d;   
        }   
        .light .light_left,.light .light_right{   
            position: absolute;   
            width: 100%;   
            height: 300px;   
            background: lightblue;   
            -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   
            -webkit-animation: changeBgColor 2s linear infinite;   
        }   
        .light .light_right{   
            -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   
            -webkit-animation-delay: 1s;   
        }   
        @-webkit-keyframes changeBgColor{   
            0%,100%{   
                background: lightblue;   
            }   
            50%{   
                background: lightgreen;   
            }   
        }   
        .light .light_left p,.light .light_right p{   
            color:#fff;   
            font-size: 80px;   
            font-weight: bold;   
            margin-left: 100px;   
        }   
        .light .light_right p{   
            float: rightright;   
            margin-right: 100px;   
        }   
        .light .load{   
            position: absolute;   
            width: 500px;   
            height: 1500px;   
            background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));   
            background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);   
            background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);    
            background-size: 350px 80px;   
            -webkit-animation: move_load 5s linear infinite;   
        }   
        @-webkit-keyframes move_load{   
            0%{   
                -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   
            }   
            100%{   
                -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   
            }   
        }   
        .littleH_body{   
            position: absolute;   
            left:50%;   
            margin-left: -157px;   
            width: 314px;   
            height: 425px;   
            background: url(1.png);   
            -webkit-transform-style: preserve-3d;   
        }   
        .leftHair{   
            position: absolute;   
            rightright: 58px;   
            top:-5px;   
            width: 100px;   
            height: 17px;   
            background: url(lefthair.png);   
            -webkit-transform-origin: left bottombottom;   
            -webkit-animation: lefthair 1s .3s ease-in-out infinite;   
  
        }   
        @-webkit-keyframes lefthair{   
            0%,10%,40%,100%{   
                -webkit-transform: rotate(0deg) translateY(1px);   
            }   
            30%{   
                -webkit-transform: rotate(-3deg) translateY(1px);   
            }   
        }   
        .rightHair{   
            position: absolute;   
            left: 58px;   
            top:-8px;   
            width: 100px;   
            height: 16px;   
            background: url(righthair.png);   
            -webkit-transform-origin: rightright bottombottom;   
            -webkit-animation: righthair 1s ease-in-out infinite;   
        }   
        @-webkit-keyframes righthair{   
            0%,10%,40%,100%{   
                -webkit-transform: rotate(0deg) translateY(1px);   
            }   
            30%{   
                -webkit-transform: rotate(4deg) translateY(1px);   
            }   
        }   
        .leftBlackeye{   
            position: absolute;   
            rightright: 87px;   
            top:102px;   
            width: 43px;   
            height: 43px;   
            background: url(eyeblack.png);   
            -webkit-animation: leftblackeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes leftblackeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translateX(15px);   
            }   
            80%,90%{   
                -webkit-transform: translateX(-15px);   
            }   
        }   
        .leftWhiteeye{   
            position: absolute;   
            rightright: 92px;   
            top:110px;   
            width: 20px;   
            height: 21px;   
            background: url(whiteeye.png);   
            background-size: 95% 95%;   
            background-repeat: no-repeat;   
            -webkit-animation: leftwhiteeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes leftwhiteeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translate3d(15px,3px,0);   
            }   
            80%,90%{   
                -webkit-transform: translate3d(-30px,3px,0);   
            }   
        }   
        .rightBlackeye{   
            position: absolute;   
            left: 84px;   
            top:102px;   
            width: 43px;   
            height: 43px;   
            background: url(eyeblack.png);   
            -webkit-animation: rightblackeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes rightblackeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translateX(15px);   
            }   
            80%,90%{   
                -webkit-transform: translateX(-15px);   
            }   
        }   
        .rightWhiteeye{   
            position: absolute;   
            left: 102px;   
            top:112px;   
            width: 20px;   
            height: 21px;   
            background: url(whiteeye.png);   
            background-size: 95% 95%;   
            background-repeat: no-repeat;   
            -webkit-animation: rightwhiteeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes rightwhiteeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translate3d(15px,3px,0);   
            }   
            80%,90%{   
                -webkit-transform: translate3d(-30px,3px,0);   
            }   
        }   
        .mouse{   
            position: absolute;   
            left: 126px;   
            top:210px;   
            width: 71px;   
            height: 30px;   
            background: url(mouse.png);   
            -webkit-transform-origin: center top;   
            -webkit-animation: mouse 5s ease-in-out infinite;   
        }   
        @-webkit-keyframes mouse{   
            40%{   
                -webkit-transform: rotate(-15deg) translateX(22px);   
            }   
            0%,20%,60%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
        }   
        .leftFoot{   
            position: absolute;   
            rightright: 85px;   
            top:424px;   
            width: 68px;   
            height: 43px;   
            background: url(leftfoot.png);   
            -webkit-transform-origin: left top;   
            -webkit-animation: leftfoot .6s ease-in-out infinite;   
        }   
        @-webkit-keyframes leftfoot{   
            0%,50%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
            80%{   
                -webkit-transform: rotate(-10deg);   
            }   
        }   
        .rightFoot{   
            position: absolute;   
            left: 85px;   
            top:424px;   
            width: 68px;   
            height: 43px;   
            background: url(rightfoot.png);   
            margin-bottom: 100px;   
            -webkit-transform-origin: rightright top;   
            -webkit-animation: rightfoot .6s ease-in-out infinite;   
        }   
        @-webkit-keyframes rightfoot{   
            0%,50%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
  
            30%{   
                -webkit-transform: rotate(10deg);   
            }   
        }

Nach dem Login kopieren

Der Code sollte immer noch leicht zu verstehen sein. Der Nachteil besteht darin, dass die Bilder nicht zusammengeführt werden. Der Hauptzweck besteht darin, die Wissenspunkte der CSS3-Animation (insbesondere 3D) zu erlernen und zu üben. Je mehr Sie üben, desto besser können Sie es sich merken und es reibungsloser verwenden > 1.png

righthair.png

lefthair.png

CSS3-Implementierung des Beispielcodes für eine niedliche Minion-Animation

eyeblack.png

whiteeye .png

mouse.png

rightfoot.png

leftfoot.png

Das Obige ist der gesamte Inhalt Ich hoffe, dass dieser Artikel für alle hilfreich ist. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zum Beispielcode für die CSS3-Implementierung von niedlichen Minion-Animationen finden Sie auf der chinesischen PHP-Website!