CSS3制作皮卡丘动画壁纸的示例

正文

ok，接下来就是晒效果图的时候了，看图后才有兴趣了解一下，不然很沉闷，没什么心思看了。

ps：由于我这个动画的尺寸做得比较大（720 x 1280），所以为了能录这个gif动画，我缩小了一倍。但是其实按原尺寸看效果会更好一些，这个的话，可以在文章结尾处我提供的地址下载。

言归正传，其实这个动画效果并不难，大家可以看到这个结构是非常简单清晰的。不过虽然简单，但是呈现出来的效果还是很不错的，这也是我为什么愿意做的原因。

好的，既然这么简单，就来看一下我实现它的html结构吧：

<div class="pikachu_container">    <div class="header">        <div class="header_main">            <span class="battery"></span>            <span cl三国演义人物形象ass="clock" id="nowtime">09:00</span>        </div>    </div>    <div class="time">        <h1>09:00</h1>        <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="no"></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 h1{    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 .no{    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:nomove 3s infinite;    -moz-animation:nomove 3s infinite;    -o-animation:nomove 3s infinite;    -ms-animation:nomove 3s infinite;    animation:nomove 3s infinite;}@-webkit-keyframes nomove{    0%,49%,51%,100%{        width:28px;        height:18px;        margin-left:-18px;    }    50%{        width:34px;        height:20px;        margin-left:-21px;    }}@-moz-keyframes nomove{    0%,49%,51%,100%{        width:28px;        height:18px;        margin-left:-18px;    }    50%{        width:34px;        height:20px;        margin-left:-21px;    }}@-o-keyframes nomove{    0%,49%,51%,100%{        width:28px;        height:18px;        margin-left:-18px;    }    50%{        width:34px;        height:20px;        margin-left:-21px;    }}@-ms-keyframes nomove{    0%,49%,51%,100%{        width:28px;        height:18px;        margin-left:-18px;    }    50%{        width:34px;        height:20px;        margin-left:-21px;    }}@keyframes nomove{    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%,10蒙面检察官0%{        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 ea-in-out infinite alternate;    -moz-animation:box-rotate 4s ea-in-out infinite alternate;    -o-animation:box-rotate 4s ea-in-out infinite alternate;    -ms-animation:box-rotate 4s ea-in-out infinite alternate;    animation:box-rotate 4s ea-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-rot裹着的拼音ate{    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:afte作文校园一角r{    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);    }}

ps：至于双手的手，由于事先的代码比较多，加上篇幅已经有点长，所以就不拿上来了。需要的话可以到我的github下载。

本案例github下载地址：https://github.com/jr93/pikachu

原文链接：

以上就是css3制作皮卡丘动画壁纸的示例的详细内容，更多关于css3 制作皮卡丘壁纸的资料请关注www.887551.com其它相关文章！