CSS3如何制作皮卡丘動畫
這篇文章給大家分享的是有關CSS3如何制作皮卡丘動畫的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的甘南網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！
正文
效果圖
PS：由于我這個動畫的尺寸做得比較大（720 x 1280），所以為了能錄這個gif動畫，我縮小了一倍。但是其實按原尺寸看效果會更好一些，這個的話，可以在文章結尾處我提供的地址下載。
言歸正傳，其實這個動畫效果并不難，大家可以看到這個結構是非常簡單清晰的。不過雖然簡單，但是呈現(xiàn)出來的效果還是很不錯的，這也是我為什么愿意做的原因。
好的，既然這么簡單，就來看一下我實現(xiàn)它的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實現(xiàn)代碼分享給大家：
首先初始化一下
*{
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如何制作皮卡丘動畫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
文章標題：CSS3如何制作皮卡丘動畫
分享網址：http://jinyejixie.com/article12/gpgsdc.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站營銷、服務器托管、定制開發(fā)、手機網站建設、動態(tài)網站、商城網站
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 網站設計容易犯的這4個錯誤 2022-11-04
- 自己的網站恰當?shù)母倪M—深圳網站設計 2022-05-27
- 企業(yè)網站建設需要注意哪些問題，網站設計時需要有哪些功能？ 2022-10-18
- 網站設計基本步驟 2016-11-04
- 網站設計需要利用好那些元素 2021-05-28
- 成都網站設計對網頁排版布局是怎么樣的呢 2016-10-29
- 北京企業(yè)網站設計時不可忽略的三點問題 2021-09-12
- 網頁設計怎么做提高用戶體驗粘度,成都網站建設 2016-10-28
- 網站設計效果體驗 2016-09-30
- 北京網站設計-網站建設中動態(tài)與靜態(tài)有什么區(qū)別 2021-11-25
- 網站導航如何設計-佛山網站設計 2022-11-26
- 網站設計中，應該避免的誤區(qū)有哪些呢 2016-11-08