html怎么制作壁纸,CSS3制作皮卡丘动画壁纸的示例

正文

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

6ca75a86781553bfd13df55723a31741.gif

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

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

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

09:00

09:00

2015年 9月3日

比卡丘可爱手机壁纸

@JR

结构主线还是比较清晰的,整体上分为顶部电池和时间,中部的时间日期,还有皮卡丘的身体。而皮卡丘的身体又分为眼睛,鼻子,嘴巴,脸颊,双手和球。

把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 .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);

}

}

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

以上就是CSS3制作皮卡丘动画壁纸的示例的详细内容,更多关于CSS3 制作皮卡丘壁纸的资料请关注脚本之家其它相关文章!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值