CSS3之动画狗
這個會動的哦，今天花了一下午的時間做的。
效果：
html代碼：
<!DOCTYPE html> <html><head><meta charset="{CHARSET}"/><title></title><link rel="stylesheet" href="3.css"></head><body><div class="bg"><div>生</div><div>日</div><div>快</div><div>樂</div></div><div class="dog"><div class="head"></div><div class="face"></div><div class="chin"></div><div class="eye right"><div class="pupil"></div></div><div class="eye left"><div class="pupil"></div></div><div class="birthmark"></div><div class="nose"><div class="nosehole"></div><div class="nosehole right"></div></div><div class="mouth"><div class="teeth"></div><div class="teeth right"></div><div class="tongue"></div></div><div class="ear"></div><div class="ear right"></div><div class="body"><div class="arm"></div><div class="arm right"></div><div class="leg"><div class="foot"></div></div><div class="leg right"><div class="foot"></div></div></div><div class="belly"></div></div></body> </html>css3代碼：
.dog{position:relative;width: 200px; height: 200px; margin: 30px auto;transform: scale(2.5, 2.5);transform-origin: 50% 0;text-align: center; } .bg{position:absolute;width: 500px; height: 500px; top: 30px;left: 420px;animation: bg 8s ease-out infinite; } .head{position: absolute;width: 102px;height: 48px;background: rgb(249, 249, 246);left: 48px;top: 5px;border-radius: 48px 48px 3px 3px;z-index: 2; } .face{width: 110px;height: 68px;position: absolute;background: rgb(249, 249, 246);top: 30px;left: 44px;border-radius:100%;z-index: 2; } .chin{width: 104px;height: 36px;position: absolute;top: 70px;left: 47px;background:rgb(249, 249, 246);border-radius: 50% / 0px 0px 36px 36px;z-index: 2; } .eye{width: 24px;height: 24px;position:absolute;border-radius:50%/12px 22px 2px 12px;background:#f9f9f6;top: 28px;left: 124px;transform: rotate(-7deg);transform-origin: 50% 100%;overflow: hidden;box-shadow: -1px 1px 0px 0px #333 inset;z-index: 3; } .pupil{width: 26px;height: 26px;border-radius: 50%;position: absolute;left: -5px;bottom: -5px;background: #e79101;box-shadow: 0px 0px 4px 1px #333 inset;z-index: 2; } .pupil::before{content: "";display: block;width: 5px;height: 5px;border-radius: 50%;position: absolute;top: 6px;left: 18px;background: #fff;z-index: 4; } .pupil::after{content: "";display: block;width: 19px;height: 19px;border-radius: 50%;position: absolute;top: 4px;left: 3px;background: black;z-index: 2; } .eye.left{top: 28px;left: 51px;transform: scale(-1,1) rotate(-6deg);box-shadow: -1px 1px 0px 0px #333 inset, 0px -2px 4px 2px #bbb;z-index: 2; } .left .pupil{animation: leye 2s ease-out infinite; } .right .pupil{animation: reye 2s ease-out infinite; } .birthmark{width: 30px;height: 36px;position: absolute;background: #1b2f90;top: 18px;left: 117px;transform: rotate(-7deg);border-radius: 36px / 43px 72px 0px 43px;z-index: 2; } .nose{width: 62px;height: 32px;position: absolute;top: 48px;left: 68px;background: #363035;border-radius: 31px / 12px 12px 19px 19px;z-index: 4; } .nose::before{width: 60px;height: 12px;position: absolute;top: 1px;left: 1px;border-radius: 30px/10px 10px 2px 2px;content: "";display: block;background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);z-index: 2; } .nosehole{position: absolute;top: 20px;left: 10px;width: 15px;height: 4px;background: linear-gradient(347deg, #363035 0%, #000 50%, #000 100%);border-radius: 50%;transform: rotate(48deg);z-index: 2; } .nosehole.right{transform: scale(-1,1) rotate(48deg);position: absolute;left: 36px;top: 20px;z-index: 2; } .mouth{width: 68px;height: 27px;position: absolute;left: 65px;top: 72px;background: #671316;border-radius: 50%/0px 0px 100% 100%;z-index: 2;animation: mouth 2s ease-out infinite; } .mouth::before{content: '';width: 72px;height: 12px;background: #f9f9f6;position: absolute;left: -1px;top: 0px;border-radius: 36px / 0px 0px 14px 14px;box-shadow: -1px 7px 8px 2px rgba(155,155,155, 0.2);z-index: 3; } .teeth{width: 8px;height: 4px;background: #f9f9f6;position: absolute;top: 11px;left: 26px;border-radius: 3px / 0 0 0 1px;border-right: .2px solid rgba(0, 0, 0, 0.5);z-index: 3; } .teeth.right{transform: scale(-1,1);top: 11px;left: 34px; } .tongue{width: 34px;height: 14px;box-shadow: 0px 0px 2px 0px rgba(143, 32, 33, 1) inset;position: absolute;top: 11px;left: 17px;border-radius: 17px / 0px 0px 11px 11px;background: #a2504f;z-index: 1;animation: tongue 2s ease-out infinite; } .ear{background: #1b2f90;width: 16px;height: 70px;border-radius: 50%;position: absolute;top: 42px;left: 52px;transform: rotate(10deg);animation: lear 2s ease-out infinite; } .ear.right{top: 42px;left: 130px;transform: rotate(-10deg);z-index: 0;animation: rear 2s ease-out infinite; } .body{width: 66px;height: 70px;position: absolute;top: 100px;left: 67px;background: #f9f9f6;border-radius: 50%; } .arm{width: 26px;height: 40px;position: absolute;top: 5px;left: -7px;background: #f9f9f6;border-radius: 26px / 26px 0 0 45px;transform: rotate(20deg); } .arm.right{transform: scale(-1, 1) rotate(20deg);left: 47px; } .arm:before {content: '';position: absolute;right: 3px;top: 10px;height: 30px;width: 10px;border-radius: 10px / 10px 0 0 30px;box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); } .leg{width: 29px;height: 50px;position: absolute;top: 36px;left: 0px;background: linear-gradient(-90deg, #ccc 0%, #f9f9f6 20%, #f9f9f6 100%);border-radius: 26px / 26px 0 26px 74px; } .leg.right{transform: scale(-1, 1);left: 37px; } .foot{width: 29px;height: 15px;position: absolute;bottom: -10px;left: 2px;background: linear-gradient(227deg, #ccc 0%, #f9f9f6 30%, #f9f9f6 100%);border-radius: 15px / 20px 24px 5px 5px; } .belly{width: 60px;height: 36px;position: absolute;bottom: 28px;left: 70px;background: linear-gradient(0deg, #ccc 0%, #f9f9f6 20%, #f9f9f6 100%);border-radius: 33px / 0px 0px 35px 35px; } @keyframes lear{0%{transform: rotate(10deg);}50%{transform: rotate(20deg);}100%{transform: rotate(0deg);} } @keyframes rear{0%{transform: rotate(-10deg);}50%{transform: rotate(-20deg);}100%{transform: rotate(0deg);} } @keyframes tongue{0%{top: 0px;}50%{top: 11px;}100%{top: 0px;} } @keyframes mouth{0%{height: 27px;}50%{height: 15px;}100%{height: 27px;} } @keyframes reye{0%{left: -5px;bottom: -5px;}50%{left: -8px;bottom: -5px;}100%{left: -5px;bottom: -5px;} } @keyframes leye{0%{left: -5px;bottom: -5px;}50%{left: -8px;bottom: -5px;}100%{left: -5px;bottom: -5px;} } @keyframes bg{0%{transform: rotate(0deg) ;background: skyblue;}25%{transform: rotate(-90deg) ;background: sienna;}50%{transform: rotate(-180deg) ;background: sandybrown;}75%{transform: rotate(-270deg) ;background: gold;}100%{transform: rotate(-360deg) ;background: tomato;} } @font-face {font-family:"龍吟體";src: url("font字體/FZZJ-LongYTJW.TTF"); } .bg>div{font-family: "龍吟體";font-size: 100px; } .bg>div:nth-child(1){position: absolute;left: 0px;top: 0px; } .bg>div:nth-child(2){position: absolute;left: 400px;top: 0px; } .bg>div:nth-child(3){position: absolute;left: 0px;top: 380px; } .bg>div:nth-child(4){position: absolute;left: 400px;top: 380px; } body:hover .bg{animation-play-state: paused; }我在這里面還用了一個字體，可能顯示不了。
弄完就一個感覺，累！！?
總結
- 上一篇： 2.1 zio入门——把函数作用作为工作
- 下一篇： CSS 基本样式