CSS3實現小黃人動畫

時間  2019-11-19
標籤 css3 css 實現 動畫 欄目 CSS 简体版
原文   原文鏈接

轉載請註明出處，謝謝！css

每次看到CSS3動畫就心癢癢想試一下，記得一個多月前看了白樹哥哥的一篇博客，忽然開竅，因而拿他提供的demo試了一下，感受很棒！下圖爲demo提供的動畫幀設計稿。html

charector

本身也想說搞一個DIY的動畫出來，但是，會PS不必定會設計啊，我搞不出一套動畫設計稿出來啊【抓狂】….因而乎，去了站酷網找找素材，我果真仍是太天真了，最後從心只找到了一張圖：css3

1

聯想到我要作CSS3動畫，呵呵……怎麼辦 ? ——沒辦法，摳唄！（此處勿噴，着實無素材）web

……最後效果變成這樣子,這是移動端的例子！(gif圖有卡頓現象，請湊合看吧,非喜勿噴…)：app

h

OK,其實主要目的仍是知識點的學習吧：學習

這個demo涉及的知識點有：動畫

perspectiveurl

perspective-originspa

transform-style設計

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

這些知識點有些涉及css3d動畫，各個知識點的具體詳解我就不解釋了，有興趣能夠到這裏瞭解一下：http://isux.tencent.com/css3/index.html

回到這個案例，話說這麼挫的動畫是怎麼具體實現的呢？ 我將分享代碼給你們練習：

html結構：

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

css代碼：

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: right;
            margin-right: 100px;
        }
        .light .load{
            position: absolute;
            width: 500px;
            height: 1500px;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));
            background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);
            background: linear-gradient(to bottom, #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;
            right: 58px;
            top:-5px;
            width: 100px;
            height: 17px;
            background: url(lefthair.png);
            -webkit-transform-origin: left bottom;
            -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: right bottom;
            -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;
            right: 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;
            right: 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;
            right: 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: right top;
            -webkit-animation: rightfoot .6s ease-in-out infinite;
        }
        @-webkit-keyframes rightfoot{
            0%,50%,100%{
                -webkit-transform: rotate(0deg);
            }

            30%{
                -webkit-transform: rotate(10deg);
            }
        }

代碼應該仍是很簡單就能看懂的，不足之處在於圖片沒有合併，就湊合吧，主要目的仍是對CSS3動畫（特別是3d）知識點的學習及實踐。多練習，才能記得更牢，用得更順，這只是開始……

PS：附上我摳的圖片

1 1.png

righthairrighthair.png

lefthairlefthair.png

eyeblackeyeblack.png

whiteeyewhiteeye.png

mousemouse.png

rightfootrightfoot.png

leftfootleftfoot.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程