中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3如何制作皮卡丘動畫

發布時間：2021-03-17 09:32:15 來源：億速云 閱讀：209 作者：小新 欄目：web開發

這篇文章給大家分享的是有關CSS3如何制作皮卡丘動畫的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

正文

效果圖

CSS3如何制作皮卡丘動畫

PS：由于我這個動畫的尺寸做得比較大（720 x 1280），所以為了能錄這個gif動畫，我縮小了一倍。但是其實按原尺寸看效果會更好一些，這個的話，可以在文章結尾處我提供的地址下載。

言歸正傳，其實這個動畫效果并不難，大家可以看到這個結構是非常簡單清晰的。不過雖然簡單，但是呈現出來的效果還是很不錯的，這也是我為什么愿意做的原因。

好的，既然這么簡單，就來看一下我實現它的html結構吧：

<div class="pikachu_container">
    <div class="header">
        <div class="header_main">
            <span class="battery"></span>
            <span class="clock" id="nowTime">09:00</span>
        </div>
    </div>
    <div class="time">
        <h2>09:00</h2>
        <p id="date">2015年 9月3日</p>
        <p>比卡丘可愛手機壁紙</p>
    </div>
    <div class="body">
        <div class="eyes">
            <div class="leftEye"></div>
            <div class="rightEye"></div>
        </div>
        <div class="nose"></div>
        <div class="cheek">
            <div class="leftCheek"></div>
            <div class="rightCheek"></div>
        </div>
        <div class="mouth">
            <div class="mouth_main">
                <div class="tongue"></div>
            </div>
        </div>
        <div class="hands">
            <div class="leftHand">
                <div class="leftHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="leftshadow"></div>
                </div>
            </div>
            <div class="rightHand">
                <div class="rightHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="rightshadow"></div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box_main">
                <div class="box_circle"></div>
            </div>
        </div>
    </div>
    <p class="author">@JR</p>
</div>

結構主線還是比較清晰的，整體上分為頂部電池和時間，中部的時間日期，還有皮卡丘的身體。而皮卡丘的身體又分為眼睛，鼻子，嘴巴，臉頰，雙手和球。

把html結構搭建好了之后，就可以根據自己對該圖測量出來的各部分的尺寸進行CSS樣式的編寫。

那么接下來我就把每一個部分的CSS實現代碼分享給大家：

首先初始化一下

*{
    margin:0;
    padding:0;
}
body{
    font-family:"微軟雅黑";
    color:#fff;
}
.pikachu_container{
    width:720px;
    height:1280px;
    background:rgb(251,205,60);
    position:relative;
    overflow:hidden;
    margin:0 auto;
}

頂部電池和時間

.pikachu_container .header{
    width:100%;
    height:50px;
    line-height:50px;
    position:relative;
    top:0;
    left:0;
}
.pikachu_container .header .header_main{
    width:160px;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    font-size:30px;
    overflow:hidden;
}
.header .header_main .battery{
    display:inline-block;
    width:34px;
    height:18px;
    border:3px solid #fff;
    border-radius:5px;
    position:absolute;
    top:50%;
    left:23px;
    margin-top:-12px;
}
.header .header_main .battery:after{
    content:'';
    display:inline-block;
    width:5px;
    height:14px;
    background:#fff;
    position: absolute;
    top:2px;
    right:2px;
    -webkit-animation:charging 2s linear infinite;
    -moz-animation:charging 2s linear infinite;
    -o-animation:charging 2s linear infinite;
    -ms-animation:charging 2s linear infinite;
    animation:charging 2s lineat infinite;
}
@-webkit-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-moz-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-o-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-ms-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
.header .header_main .battery:before{
    content:'';
    display:block;
    width:3px;
    height:12px;
    background:#fff;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    position: absolute;
    top:3px;
    left:-6px;
}
.header .header_main .clock{
    position: absolute;
    right:14px;
    top:0;
}

中部的日期和時間

.pikachu_container .time{
    width:100%;
    height:250px;
    position: relative;
    top:70px;
    left:0;
    text-align:center;
}
.pikachu_container .time h2{
    font-size:90px;
    letter-spacing:8px;
    text-shadow:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_container .time p:nth-of-type(1){
    font-size:30px;
    margin-top:10px;
}
.pikachu_container .time p:nth-of-type(2){
    font-size:26px;
    margin-top:8px;
    -webkit-animation:textShake 1s infinite;
    -moz-animation:textShake 1s infinite;
    -o-animation:textShake 1s infinite;
    -ms-animation:textShake 1s infinite;
    animation:textShake 1s infinite;
}
@-webkit-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -webkit-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-moz-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -moz-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -moz-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-o-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -o-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -o-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -o-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-ms-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -ms-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -ms-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}

皮卡丘的眼睛

.pikachu_container .body{
    width:100%;
    height:940px;
    position: relative;
    top:50px;
    left:0;
}
.body .eyes{
    position: relative;
}
.body .eyes .leftEye,.body .eyes .rightEye{
    width:85px;
    height:85px;
    border:5px solid rgb(2,0,1);
    background:rgb(51,51,51);
    border-radius:50%;
    position: absolute;
    top:40px;
}
.body .eyes .leftEye{
    left:150px;
}
.body .eyes .rightEye{
    right:150px;
}
.body .eyes .leftEye:after,.body .eyes .rightEye:after{
    content:'';
    display:block;
    width:40px;
    height:40px;
    background:#fff;
    border:5px solid rgb(2,0,1);
    border-radius:50%;
    position:absolute;
    top:2px;
    left:2px;
    -webkit-animation:eyeMove 3s infinite;
    -moz-animation:eyeMove 3s infinite;
    -o-animation:eyeMove 3s infinite;
    -ms-animation:eyeMove 3s infinite;
    animation:eyeMove 3s infinite;
}
@-webkit-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-moz-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-o-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-ms-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}

皮卡丘的鼻子

.body .nose{
    position:absolute;
    width:28px;
    height:18px;
    background:rgb(51,51,51);
    border:4px solid rgb(2,0,1);
    border-radius:36px/26px;
    left:50%;
    top:100px;
    margin-left:-18px;
    -webkit-animation:noseMove 3s infinite;
    -moz-animation:noseMove 3s infinite;
    -o-animation:noseMove 3s infinite;
    -ms-animation:noseMove 3s infinite;
    animation:noseMove 3s infinite;
}
@-webkit-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-moz-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-o-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-ms-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}

皮卡丘的臉頰

.body .cheek{
    position: relative;
}
.body .cheek .leftCheek,.body .cheek .rightCheek{
    width:120px;
    height:120px;
    border:5px solid rgb(2,0,1);
    background:rgb(231,74,57);
    border-radius:50%;
    position: absolute;
    top:170px;
    -webkit-animation:cheekMove 3s infinite;
    -moz-animation:cheekMove 3s infinite;
    -o-animation:cheekMove 3s infinite;
    -ms-animation:cheekMove 3s infinite;
    animation:cheekMove 3s infinite;
}
@-webkit-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-moz-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-o-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-ms-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
.body .cheek .leftCheek{
    left:60px;
}
.body .cheek .rightCheek{
    right:60px;
}

皮卡丘的嘴巴

.body .mouth{
    position: relative;
    width:180px;
    height:220px;
    left:50%;
    top:180px;
    margin-left:-90px;
}
.body .mouth .mouth_main{
    position: absolute;
    left:0;
    top:0px;
    width:180px;
    height:220px;
    background:rgb(132,37,41);
    border:4px solid rgb(2,0,1);
    border-top-right-radius:15px 15px;
    border-bottom-left-radius: 250px 570px;
    border-bottom-right-radius: 250px 590px;
    overflow:hidden;
    -webkit-animation:mouthMove 3s infinite;
    -moz-animation:mouthMove 3s infinite;
    -o-animation:mouthMove 3s infinite;
    -ms-animation:mouthMove 3s infinite;
    animation:mouthMove 3s infinite;
}
@-webkit-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-moz-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-o-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-ms-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
.body .mouth:after,.body .mouth:before{
    content:'';
    display:block;
    width:112px;
    height:38px;
    background:rgb(251,205,60);
    border-bottom:4px solid rgb(2,0,1);
    position: absolute;
    top:-13px;
    z-index:3;
}
.body .mouth:after{
    border-left:4px solid rgb(2,0,1);
    border-bottom-left-radius: 340px 180px;
    left:-30px;
    -webkit-transform:rotate(-24deg);
    -moz-transform:rotate(-24deg);
    -o-transform:rotate(-24deg);
    -ms-transform:rotate(-24deg);
    transform:rotate(-24deg);
}
.body .mouth:before{
    border-right:4px solid rgb(2,0,1);
    border-bottom-right-radius: 340px 180px;
    right:-30px;
    -webkit-transform:rotate(24deg);
    -moz-transform:rotate(24deg);
    -o-transform:rotate(24deg);
    -ms-transform:rotate(24deg);
    transform:rotate(24deg);
}
.body .mouth .tongue{
    width:200px;
    height:200px;
    background:rgb(221,102,106);
    margin-top:40px;
    margin-left:-10px;
    border-top-left-radius: 380px;
    border-top-right-radius: 420px 380px;
    overflow:hidden;
}

皮卡丘的嘴巴還是值得琢磨的，最主要還是用了border-radius來完成這個效果。這個圓角特性還是蠻強大的，主要是看怎么去使用它。

皮卡丘身上的球

.body .box{
    width:82px;
    height:82px;
    border:3px solid #fff;
    border-radius:50%;
    position: relative;
    box-shadow:0 0 5px rgba(255,255,255,0.9);
    left:50%;
    top:320px;
    margin-left:-44px;
    -webkit-animation:box-rotate 4s ease-in-out infinite alternate;
    -moz-animation:box-rotate 4s ease-in-out infinite alternate;
    -o-animation:box-rotate 4s ease-in-out infinite alternate;
    -ms-animation:box-rotate 4s ease-in-out infinite alternate;
    animation:box-rotate 4s ease-in-out infinite alternate;
}
@-webkit-keyframes box-rotate{
    0%,90%,100%{
        -webkit-transform:rotate(0deg);
    }
    40%,50%{
        -webkit-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-moz-keyframes box-rotate{
    0%,90%,100%{
        -moz-transform:rotate(0deg);
    }
    40%,50%{
        -moz-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-o-keyframes box-rotate{
    0%,90%,100%{
        -o-transform:rotate(0deg);
    }
    40%,50%{
        -o-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-ms-keyframes box-rotate{
    0%,90%,100%{
        -ms-transform:rotate(0deg);
    }
    40%,50%{
        -ms-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@keyframes box-rotate{
    0%,90%,100%{
        transform:rotate(0deg);
    }
    40%,50%{
        transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
.body .box .box_main{
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgb(236,2,3);
    border:1px solid #333;
    position: absolute;
    top:0;
    left:0;
    overflow:hidden;
}
.body .box .box_main:before{
    content:'';
    display:block;
    width:80px;
    height:40px;
    background:#fff;
    position:absolute;
    bottom:0;
    left:0;
}
.body .box .box_main:after{
    content:'';
    display:block;
    width:80px;
    height:12px;
    background:rgb(59,53,67);
    position:absolute;
    top:50%;
    left:0;
    margin-top:-6px;
}
.body .box .box_main .box_circle{
    width:24px;
    height:24px;
    border:8px solid rgb(59,53,67);
    border-radius:50%;
    background:#fff;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-20px;
    margin-top:-20px;
    z-index:5;
}
.body .box .box_main .box_circle:after{
    content:'';
    display:block;
    width:16px;
    height:16px;
    border:1px solid rgb(59,53,67);
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-9px;
    margin-top:-9px;
    -webkit-animation:bg_change 4s infinite;
    -moz-animation:bg_change 4s infinite;
    -o-animation:bg_change 4s infinite;
    -ms-animation:bg_change 4s infinite;
    animation:bg_change 4s infinite;
}
@-webkit-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-moz-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-o-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-ms-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}

感謝各位的閱讀！關于“CSS3如何制作皮卡丘動畫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
巧家县| 浠水县| 宁明县| 永定县| 喀喇沁旗| 定州市| 禄丰县| 鲜城| 建宁县| 太保市| 长汀县| 公安县| 吉隆县| 靖安县| 潍坊市| 和静县| 宁武县| 武平县| 都昌县| 左贡县| 玉屏| 交口县| 平遥县| 江城| 阿尔山市| 泸州市| 崇义县| 嵊州市| 建宁县| 乌恰县| 巫溪县| 灵石县| 雅安市| 延吉市| 鹿邑县| 河津市| 西林县| 襄垣县| 兴安县| 安西县| 阜新市|