Implémentation CSS3 d'un exemple de code d'animation de minions mignons-tutoriel CSS-php.cn

Chaque fois que je vois une animation CSS3, j'ai envie de l'essayer. Je me souviens avoir lu un blog de frère Bai Shu il y a plus d'un mois, et tout à coup j'ai eu une idée, alors j'ai essayé la démo qu'il m'a fournie, et elle l'a fait. c'était super ! L'image ci-dessous montre le projet de conception du cadre d'animation fourni par la démo.

Implémentation CSS3 dun exemple de code danimation de minions mignons

Je souhaite aussi réaliser une animation DIY, mais connaître PS ne signifie pas nécessairement que je peux la concevoir, je n'arrive pas à proposer un ensemble de. des brouillons de conception d'animation. [Crazy]… Alors je suis allé sur Zoku.com pour chercher du matériel, j'étais vraiment trop naïf, et au final je n'ai trouvé qu'une seule image :

Implémentation CSS3 dun exemple de code danimation de minions mignons

Je pense que je veux faire une animation CSS3, haha... que dois-je faire ? - Pas question, creuse-le ! (Ne vaporisez pas ici, il n'y a vraiment pas de matière)

...L'effet final ressemble à ceci, c'est un exemple sur le terminal mobile ! (Le gif est bloqué, alors s'il vous plaît, regardez-le, ne le vaporisez pas si vous ne l'aimez pas...) :

Implémentation CSS3 dun exemple de code danimation de minions mignons

OK, en fait, le l'objectif principal est d'apprendre les points de connaissance :

Les points de connaissance impliqués dans cette démo sont :

perspective

perspective-origin

transformation-style

transformation-origine

animation

@keyframes

Translate3d, Translate ://m.sbmmt.com/Retour à ce cas, comment une animation aussi frustrante a-t-elle été mise en œuvre ? Je partagerai le code pour que vous puissiez vous entraîner :

structure html :

code css :

<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>

Copier après la connexion

Le code doit toujours être facile à comprendre. L'inconvénient est que les images ne sont pas fusionnées, il suffit donc de se débrouiller. L'objectif principal est d'apprendre et de mettre en pratique les connaissances de l'animation CSS3 (en particulier la 3D). Plus vous pratiquez, plus vous pourrez vous en souvenir plus fermement et l'utiliser plus facilement. Ce n'est que le début...

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);   
            }   
        }

Copier après la connexion

PS : Ci-joint la photo que j'ai découpée

1.png

righthair.png

Implémentation CSS3 dun exemple de code danimation de minions mignons

lefthair.png

eyeblack.png

whiteeye .png

mouse.png

rightfoot.png

leftfoot.png

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur l'implémentation CSS3 d'exemples de code d'animation de minions mignons, veuillez faire attention au site Web PHP chinois !