<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>H5 会动的皮卡丘动画</title> </head> <body> <!--视图框--> <div id="view"> <!--皮卡丘--> <div id="pikachu"> <!--尾巴--> <div class="tail"> <div class="tail3"></div> <div class="tail2"></div> <div class="tail1"></div> <div class="tail_shading"></div> </div> <!--尾巴结束--> <!--耳朵--> <div class="ear"> <div class="ear_left"></div> <div class="ear_right"></div> <div class="ear_shading_left"></div> <div class="ear_shading_right"></div> </div> <!--耳朵结束--> <!--腿--> <div class="leg"> <div class="leg_left"></div> <div class="leg_right"></div> </div> <!--腿结束--> <!--身体--> <div id="body"> <div class="arm_left"></div> <div class="arm_right"></div> </div> <!--身体结束--> <!--头--> <div id="head"> <!--脸蛋--> <div class="face_left"></div> <div class="face_right"></div> <!--眼睛--> <div class="eye_left"> <!--眼白--> <div class="eye_shading_left"></div> </div> <div class="eye_right"> <!--眼白--> <div class="eye_shading_right"></div> </div> <!--眼睛结束--> <!--嘴巴--> <div class="mouth_left"></div> <div class="mouth_right"></div> <!--舌头--> <div class="tongue"></div> <!--鼻子--> </div> <!--头结束--> </div> <!--皮卡丘结束--> </div> <!--视图框结束--> <style type="text/css"> body { margin: 0; overflow: hidden; } #view { width: 500px; height: 500px; margin: 0px auto 0px auto; background: ; position: relative; } /*头*/ #head { width: 160px; height: 175px; margin: auto; background: #ffe100; position: absolute; top: 10%; left: 35%; border-top-left-radius: 45% 43%; border-top-right-radius: 45% 43%; border-bottom-left-radius: 50% 35%; border-bottom-right-radius: 50% 35%; border: 4px solid #000; border-bottom-color: #ffe100; } /*身体*/ #body { width: 170px; height: 185px; background: #ffe100; position: absolute; top: 38%; left: 34%; border-bottom-left-radius: 45% 43%; border-bottom-right-radius: 45% 43%; border-top-left-radius: 30% 90%; border-top-right-radius: 30% 90%; border: 4px solid #000; } /*左耳朵*/ .ear_left { width: 100px; height: 100px; background-color: #ffe100; border-radius: 100px 0px; border: 4px solid #000; position: absolute; left: 300px; } /*右耳朵*/ .ear_right { width: 100px; height: 100px; background-color: #ffe100; border-radius: 0px 100px; border: 4px solid #000; position: absolute; left: 100px; } /*右耳朵黑色阴影*/ .ear_shading_right { width: 38px; height: 77px; background-color: #000; border-radius: 14% 0% 100% 0%; position: absolute; left: 370px; top: 3px; } /*左耳朵黑色阴影*/ .ear_shading_left { width: 38px; height: 77px; background-color: #000; border-radius: 0% 14% 0% 100%; position: absolute; left: 100px; top: 3px; } /*左脸蛋*/ .face_left { width: 45px; height: 45px; background-color: #ff2200; border-radius: 50%; margin-top: 100px; float: left; overflow: hidden; border: 2px solid #000; } /*右脸蛋*/ .face_right { width: 45px; height: 45px; background-color: #ff2200; border-radius: 50%; margin-top: 100px; float: right; overflow: hidden; border: 2px solid #000; } /*右眼睛*/ .eye_right { width: 30px; height: 30px; background-color: #000; border-radius: 50%; position: absolute; left: 20px; top: 60px; overflow: hidden; } /*右眼白*/ .eye_shading_right { width: 15px; height: 15px; background-color: #fff; border-radius: 50%; position: absolute; left: 11px; } /*左眼睛*/ .eye_left { width: 30px; height: 30px; background-color: #000; border-radius: 50%; position: absolute; left: 110px; top: 60px; overflow: hidden; } /*左眼白*/ .eye_shading_left { width: 15px; height: 15px; background-color: #fff; border-radius: 50%; position: absolute; left: 5px; } /*鼻子*/ .nose { width: 15px; height: 10px; background-color: #000; border-radius: 50%; left: 73px; top: 88px; position: absolute; overflow: hidden; } /*嘴巴右*/ .mouth_right { width: 35px; height: 30px; background: #ffe100; position: absolute; top: 67px; left: 72px; border-radius: 50%; border: 3px solid #ffe100; border-bottom-color: #000; } /*嘴巴左*/ .mouth_left { width: 35px; height: 30px; background: #ffe100; position: absolute; top: 67px; left: 47px; border-radius: 50%; border: 3px solid #ffe100; border-bottom-color: #000; } /*舌头*/ .tongue { width: 23px; height: 3px; background: #ff2200; position: absolute; top: 102px; left: 66px; border-bottom-left-radius: 40% 90%; border-bottom-right-radius: 40% 90%; border: 3px solid #000; border-top-color: #ffe100; -webkit-animation: tongue 1s ease-in-out infinite; animation: tongue 1s ease-in-out infinite; } /*左胳膊*/ .arm_left { width: 50px; height: 65px; background: #ffe100; position: absolute; top: 50px; left: 20px; border-bottom-left-radius: 40% 90%; border-bottom-right-radius: 40% 90%; border: 4px solid #000; border-top-color: #ffe100; -webkit-transform: skew(16deg); transform: skew(16deg); } /*右胳膊*/ .arm_right { width: 50px; height: 65px; background: #ffe100; position: absolute; top: 50px; left: 95px; border-bottom-left-radius: 40% 90%; border-bottom-right-radius: 40% 90%; border: 4px solid #000; border-top-color: #ffe100; -webkit-transform: skew(-16deg); transform: skew(-16deg); } /*左腿*/ .leg_left { position: absolute; width: 47px; height: 19px; border: 4px solid #000; background: #ffe100; border-radius: 80% 20% 80% 10%; top: 356px; left: 164px; } /*右腿*/ .leg_right { position: absolute; width: 47px; height: 19px; border: 4px solid #000; background: #ffe100; border-radius: 20% 80% 10% 80%; top: 356px; left: 293px; } /*尾巴上*/ .tail1 { width: 127px; height: 70px; -webkit-transform: skew(-20deg); transform: skew(-20deg); background: #ffe100; border: 4px solid #000; position: absolute; top: 100px; left: -8px; } /*尾巴中*/ .tail2 { width: 66px; height: 149px; -webkit-transform: skew(-20deg); transform: skew(-20deg); background: #ffe100; border: 4px solid #000; position: absolute; top: 134px; left: 96px; } /*尾巴下*/ .tail3 { width: 42px; height: 87px; -webkit-transform: skew(-20deg); transform: skew(-20deg); background: #ffe100; border: 4px solid #000; position: absolute; top: 235px; left: 140px; } /*尾巴阴影*/ .tail_shading { width: 29px; height: 183px; -webkit-transform: skew(16deg); transform: skew(16deg); background: #ffe100; position: absolute; top: 113px; left: 118px; } /*尾巴摇摆*/ .tail { -webkit-animation: tail 0.2s ease-in-out infinite; animation: tail 0.2s ease-in-out infinite; } /*吐舌头*/ @-webkit-keyframes tongue { 0% { height: 3px; } 30% { width: 20px; height: 36px; } 100% { height: 3px; } } /*吐舌头*/ @keyframes tongue { 0% { height: 3px; } 30% { width: 20px; height: 36px; } 100% { height: 3px; } } /*尾巴摇摆动画*/ @-webkit-keyframes tail { 0% { -webkit-transform-origin: 250px 300px; -webkit-transform: rotateZ(0deg); } 60% { -webkit-transform-origin: 250px 300px; -webkit-transform: rotateZ(10deg); } 100% { -webkit-transform-origin: 250px 300px; -webkit-transform: rotateZ(0deg); } } /*尾巴摇摆动画*/ @keyframes tail { 0% { transform-origin: 250px 300px; transform: rotateZ(0deg); } 60% { transform-origin: 250px 300px; transform: rotateZ(10deg); } 100% { transform-origin: 250px 300px; transform: rotateZ(0deg); } } </style> </body> </html>
效果图: