CSS3制作皮卡丘动画壁纸的示例
网站建设 2023-01-28 21:39www.1681989.com免费网站
正文
OK，接下来就是晒效果图的时候了，看图后才有兴趣了解一下，不然很沉闷，没什么心思看了。
PS由于我这个动画的尺寸做得比较大（720 x 1280），所以为了能录这个gif动画，我缩小了一倍。其实按原尺寸看效果会更好一些，这个的话，可以在文章结尾处我提供的地址下载。
言归正传，其实这个动画效果并不难，大家可以看到这个结构是非常简单清晰的。不过虽然简单，呈现出来的效果还是很不错的，这也是我为什么愿意做的原因。
好的，既然这么简单，就来看一下我实现它的html结构吧
<div class="pikachu_contaer">
<div class="header">
<div class="header_ma">
<span class="battery"></span>
<span class="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="nose"></div>
<div class="cheek">
<div class="leftCheek"></div>
<div class="rightCheek"></div>
</div>
<div class="mouth">
<div class="mouth_ma">
<div class="tongue"></div>
</div>
</div>
<div class="hands">
<div class="leftHand">
<div class="leftHand_ma">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="leftshadow"></div>
</div>
</div>
<div class="rightHand">
<div class="rightHand_ma">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="rightshadow"></div>
</div>
</div>
</div>
<div class="box">
<div class="box_ma">
<div class="box_circle"></div>
</div>
</div>
</div>
<p class="author">@JR</p>
</div>
结构主线还是比较清晰的，整体上分为顶部电池和时间，中部的时间日期，还有皮卡丘的身体。而皮卡丘的身体又分为眼睛，鼻子，嘴巴，脸颊，双手和球。
把html结构搭建好了之后，就可以根据自己对该图测量出来的各部分的尺寸进行CSS样式的编写。
那么接下来我就把每一个部分的CSS实现代码分享给大家
初始化一下
{
marg:0;
paddg:0;
}
body{
font-family:"微软雅黑";
color:#fff;
}
.pikachu_contaer{
width:720px;
height:1280px;
background:rgb(251,205,60);
position:relative;
overflow:hidden;
marg:0 auto;
}
顶部电池和时间
.pikachu_contaer .header{
width:100%;
height:50px;
le-height:50px;
position:relative;
:0;
left:0;
}
.pikachu_contaer .header .header_ma{
width:160px;
height:100%;
position:absolute;
right:0;
:0;
font-size:30px;
overflow:hidden;
}
.header .header_ma .battery{
display:le-block;
width:34px;
height:18px;
border:3px solid #fff;
border-radius:5px;
position:absolute;
:50%;
left:23px;
marg-:-12px;
}
.header .header_ma .battery:after{
content:'';
display:le-block;
width:5px;
height:14px;
background:#fff;
position: absolute;
:2px;
right:2px;
-webkit-animation:chargg 2s lear fite;
-moz-animation:chargg 2s lear fite;
-o-animation:chargg 2s lear fite;
-ms-animation:chargg 2s lear fite;
animation:chargg 2s leat fite;
}
@-webkit-keyframes chargg{
0%{
width:5px;
}
100%{
width:30px;
}
}
@-moz-keyframes chargg{
0%{
width:5px;
}
100%{
width:30px;
}
}
@-o-keyframes chargg{
0%{
width:5px;
}
100%{
width:30px;
}
}
@-ms-keyframes chargg{
0%{
width:5px;
}
100%{
width:30px;
}
}
@keyframes chargg{
0%{
width:5px;
}
100%{
width:30px;
}
}
.header .header_ma .battery:before{
content:'';
display:block;
width:3px;
height:12px;
background:#fff;
border--left-radius:4px;
border-bottom-left-radius:4px;
position: absolute;
:3px;
left:-6px;
}
.header .header_ma .clock{
position: absolute;
right:14px;
:0;
}
中部的日期和时间
.pikachu_contaer .time{
width:100%;
height:250px;
position: relative;
:70px;
left:0;
text-align:center;
}
.pikachu_contaer .time h1{
font-size:90px;
letter-spacg:8px;
text-shadow:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_contaer .time p:nth-of-type(1){
font-size:30px;
marg-:10px;
}
.pikachu_contaer .time p:nth-of-type(2){
font-size:26px;
marg-:8px;
-webkit-animation:textShake 1s fite;
-moz-animation:textShake 1s fite;
-o-animation:textShake 1s fite;
-ms-animation:textShake 1s fite;
animation:textShake 1s fite;
}
@-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_contaer .body{
width:100%;
height:940px;
position: relative;
: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;
: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;
:2px;
left:2px;
-webkit-animation:eyeMove 3s fite;
-moz-animation:eyeMove 3s fite;
-o-animation:eyeMove 3s fite;
-ms-animation:eyeMove 3s fite;
animation:eyeMove 3s fite;
}
@-webkit-keyframes eyeMove{
0%,100%{
:2px;
left:2px;
}
30%,60%,70%{
:0px;
left:17px;
}
40%{
:0px;
left:21px;
}
50%{
:0px;
left:13px;
}
80%,90%{
:17px;
left:17px;
}
}
@-moz-keyframes eyeMove{
0%,100%{
:2px;
left:2px;
}
30%,60%,70%{
:0px;
left:17px;
}
40%{
:0px;
left:21px;
}
50%{
:0px;
left:13px;
}
80%,90%{
:17px;
left:17px;
}
}
@-o-keyframes eyeMove{
0%,100%{
:2px;
left:2px;
}
30%,60%,70%{
:0px;
left:17px;
}
40%{
:0px;
left:21px;
}
50%{
:0px;
left:13px;
}
80%,90%{
:17px;
left:17px;
}
}
@-ms-keyframes eyeMove{
0%,100%{
:2px;
left:2px;
}
30%,60%,70%{
:0px;
left:17px;
}
40%{
:0px;
left:21px;
}
50%{
:0px;
left:13px;
}
80%,90%{
:17px;
left:17px;
}
}
@keyframes eyeMove{
0%,100%{
:2px;
left:2px;
}
30%,60%,70%{
:0px;
left:17px;
}
40%{
:0px;
left:21px;
}
50%{
:0px;
left:13px;
}
80%,90%{
: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%;
:100px;
marg-left:-18px;
-webkit-animation:noseMove 3s fite;
-moz-animation:noseMove 3s fite;
-o-animation:noseMove 3s fite;
-ms-animation:noseMove 3s fite;
animation:noseMove 3s fite;
}
@-webkit-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
marg-left:-18px;
}
50%{
width:34px;
height:20px;
marg-left:-21px;
}
}
@-moz-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
marg-left:-18px;
}
50%{
width:34px;
height:20px;
marg-left:-21px;
}
}
@-o-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
marg-left:-18px;
}
50%{
width:34px;
height:20px;
marg-left:-21px;
}
}
@-ms-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
marg-left:-18px;
}
50%{
width:34px;
height:20px;
marg-left:-21px;
}
}
@keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
marg-left:-18px;
}
50%{
width:34px;
height:20px;
marg-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;
:170px;
-webkit-animation:cheekMove 3s fite;
-moz-animation:cheekMove 3s fite;
-o-animation:cheekMove 3s fite;
-ms-animation:cheekMove 3s fite;
animation:cheekMove 3s fite;
}
@-webkit-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
:170px;
}
50%{
width:100px;
height:100px;
:180px;
}
}
@-moz-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
:170px;
}
50%{
width:100px;
height:100px;
:180px;
}
}
@-o-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
:170px;
}
50%{
width:100px;
height:100px;
:180px;
}
}
@-ms-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
:170px;
}
50%{
width:100px;
height:100px;
:180px;
}
}
@keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
:170px;
}
50%{
width:100px;
height:100px;
:180px;
}
}
.body .cheek .leftCheek{
left:60px;
}
.body .cheek .rightCheek{
right:60px;
}
皮卡丘的嘴巴
.body .mouth{
position: relative;
width:180px;
height:220px;
left:50%;
:180px;
marg-left:-90px;
}
.body .mouth .mouth_ma{
position: absolute;
left:0;
:0px;
width:180px;
height:220px;
background:rgb(132,37,41);
border:4px solid rgb(2,0,1);
border--right-radius:15px 15px;
border-bottom-left-radius: 250px 570px;
border-bottom-right-radius: 250px 590px;
overflow:hidden;
-webkit-animation:mouthMove 3s fite;
-moz-animation:mouthMove 3s fite;
-o-animation:mouthMove 3s fite;
-ms-animation:mouthMove 3s fite;
animation:mouthMove 3s fite;
}
@-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;
:-13px;
z-dex: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);
marg-:40px;
marg-left:-10px;
border--left-radius: 380px;
border--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%;
:320px;
marg-left:-44px;
-webkit-animation:box-rotate 4s ease--out fite alternate;
-moz-animation:box-rotate 4s ease--out fite alternate;
-o-animation:box-rotate 4s ease--out fite alternate;
-ms-animation:box-rotate 4s ease--out fite alternate;
animation:box-rotate 4s ease--out fite 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_ma{
width:80px;
height:80px;
border-radius:50%;
background:rgb(236,2,3);
border:1px solid #333;
position: absolute;
:0;
left:0;
overflow:hidden;
}
.body .box .box_ma:before{
content:'';
display:block;
width:80px;
height:40px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
.body .box .box_ma:after{
content:'';
display:block;
width:80px;
height:12px;
background:rgb(59,53,67);
position:absolute;
:50%;
left:0;
marg-:-6px;
}
.body .box .box_ma .box_circle{
width:24px;
height:24px;
border:8px solid rgb(59,53,67);
border-radius:50%;
background:#fff;
position: absolute;
left:50%;
:50%;
marg-left:-20px;
marg-:-20px;
z-dex:5;
}
.body .box .box_ma .box_circle:after{
content:'';
display:block;
width:16px;
height:16px;
border:1px solid rgb(59,53,67);
border-radius:50%;
position:absolute;
:50%;
left:50%;
marg-left:-9px;
marg-:-9px;
-webkit-animation:bg_change 4s fite;
-moz-animation:bg_change 4s fite;
-o-animation:bg_change 4s fite;
-ms-animation:bg_change 4s fite;
animation:bg_change 4s fite;
}
@-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下载地址
原文链接
以上就是CSS3制作皮卡丘动画壁纸的示例的详细内容，更多关于CSS3 制作皮卡丘壁纸的资料请关注狼蚁SEO其它相关文章！
上一篇：CSS常用的封装方法汇总
下一篇：CSS3实现时间轴特效
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销