纯CSS3制作皮卡丘动画壁纸

news/2024/11/17 8:44:46/

前言

明天就放假了，趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果。话说还得缘起我逛了一下站酷网，然后不小心看到了一张皮卡丘的手机壁纸，觉得很可爱，然后觉得这种效果是可以用CSS3来实现的，于是带着好感就实现了它。至于原图吧，为了不影响大家对我实现的动画产生对比，我就有心地不放上来了，哈哈！那么到底是什么效果呢？接着往下看吧！

正文

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

222222

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"><h1>09:00</h1><p id="date">2015年&nbsp;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 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下载。

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


http://www.ppmy.cn/news/886257.html

相关文章

人事工资管理系统免费PPT

人事工资管理系统免费PPT

今日免费PPT分享
阅读更多...
百度员工一年挣多少钱？聊聊百度的薪资职级体系

百度员工一年挣多少钱？聊聊百度的薪资职级体系

百度的职级序列 百度的技术岗位级别为T序列&#xff0c;总共12级&#xff0c;大概阿里的级别减1或2&#xff0c;就是百度的级别。 •主要集中在T5/T6&#xff0c;升T7很困难&#xff0c;T7升T8更困难&#xff1b;T7以上一般就不做coding了&#xff1b; •一般来说&#xff0c;在…
阅读更多...
[机缘参悟-82]：企业、HR、管理者激励员工的本质

[机缘参悟-82]：企业、HR、管理者激励员工的本质

激励的本质 大多数时候&#xff0c;立场决定观点。 HR、管理者一个重要的职责就是激励员工&#xff0c;通过各种方法和手段来激励员工&#xff0c;提升员工的绩效。 如果从辩证的角度来看&#xff0c;企业提高个人绩效的本质不过通过各种手段和方法&#xff0c;尽可能多地榨取…
阅读更多...
人事管理系统hrm的总结

人事管理系统hrm的总结

人事管理系统 配置环境 spring-mvc.xml <!-- 组件扫描&#xff0c;扫描controller中的Controller--><context:component-scan base-package"com.ssp.**.controller"/><!-- 注解驱动--><mvc:annotation-driven/><!-- 处理静态资…
阅读更多...
SSM人事管理系统

SSM人事管理系统

源码地址&#xff1a; https://github.com/yjlch1016/hrmapp &#xff08;包含SQL&#xff09;
阅读更多...
高项_第九章人力资源管理

高项_第九章人力资源管理

第九章 人力资源管理 项目人力资源管理概念&#xff08;了解&#xff09; 项目团队 项目团队由为完成项目而承担不同角色与职责的人员组成。项目团队成 员可能具备不同的技能&#xff0c;可能是全职或兼职的,可能随项目进展而增加或减 少。 项目管理团队 项目管理团队是项目团…
阅读更多...
什么是薪酬管理系统，薪酬管理有哪些功能？

什么是薪酬管理系统，薪酬管理有哪些功能？

阅读本文您将了解&#xff1a;1.薪酬管理系统的定义&#xff1b;2.薪酬管理系统的功能&#xff1b;3.薪酬管理系统的作用。 一、薪酬管理系统是什么 薪酬管理系统是一种用于管理企业员工的薪资和奖金的工具。它可以自动计算员工的工资和奖金&#xff0c;记录员工的考勤和休假…
阅读更多...
人力资源案例：薪酬与绩效考核体系建设

人力资源案例：薪酬与绩效考核体系建设

某大型零售企业人力资源部经理&#xff1a; 本次项目合作是在公司领导慎重考虑和选择的情况开展的&#xff0c;项目共进行了4个月&#xff0c;通过合作&#xff0c;我们认为选择华恒智信是正确的。 之前我们也接触过其他咨询公司&#xff0c;但是华恒智信的表现更加专业化&…
阅读更多...
最新文章

Copyright @ 2022~2023