前端學習筆記day09 小黃人制作
阿新 • • 發佈：2018-12-15
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap { width: 400px; height: 600px; border: 1px solid red; margin: 0px auto; position: relative; } .body { width: 250px; height: 400px; border: 5px solid #000; border-radius: 126px; background-color: yellow; position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; } .hair-l,.hair-r { width: 117px; height: 75px; border-top: 10px solid #000; border-radius: 100px; position: absolute; animation: hair 3s ease-in infinite; } @keyframes hair{ 0%,50%,100% { transform: rotate(50deg); } 30%,80% { transform: rotate(44deg); } } .hair-l { top: 30px; left: 100px; transform: rotate(50deg); } .hair-r { top: 14px; left: 98px; transform: rotate(50deg); } .hand-l,.hand-r { width: 80px; height: 50px; border: 4px solid #000; border-radius: 20px; background-color: yellow; position: absolute; top: 268px; z-index: -1; } .hand-l { transform: rotate(-50deg); left: 32px; } .hand-r { transform: rotate(50deg); right: 32px; } .hand-l::after,.hand-r::after { content: ""; width: 30px; height: 13px; background-color: #000; position: absolute; border-radius: 6px; } .hand-l::after { top: 13px; left: 20px; } .hand-r::after { top: 13px; left: 30px; } .foot-l,.foot-r { width: 25px; height: 55px; background-color: #000; position: absolute; top: 440px; z-index: -1; } .foot-l { left: 170px; } .foot-r { left: 210px; } .foot-l::after,.foot-r::after { content: ""; width: 60px; height: 30px; background-color: #000; position: absolute; top: 40px; border-radius: 30px; } .foot-l::after { left: -35px; } .eyes-l,.eyes-r { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; border: 5px solid #000; position: absolute; top: 70px; } .eyes-l { left: 35px; } .eyes-r { left: 125px; } .l-black,.r-black { width: 44px; height: 44px; background-color: #000; border-radius: 50%; position: absolute; top: 17px; left: 15px; animation: eyes-black 5s ease-in infinite; transform-style: preserve-3d; } @keyframes eyes-black { 0%,50%,100% { transform: translateX(0); } 20%,70% { transform: translateX(8px); } } .l-white,.r-white { width: 18px; height: 18px; background-color: #fff; border-radius: 50%; position: absolute; top: 13px; animation: eyes-white 5s ease-in infinite; } @keyframes eyes-white { 0%,100% { transform: translate(0,0); } 20%,70% { transform: translate(2px,3px); } 50% { transform: translate(2px,-3px); } } .l-white { left: 23px; } .r-white { left: 4px; } .eyes-l::after,.eyes-r::after { content: ""; width: 43px; height: 15px; background-color: #000; position: absolute; top: 28px; } .eyes-l::after { left: -44px; transform: rotate(20deg); } .eyes-r::after { left: 80px; transform: rotate(-20deg); } .mouth { width: 35px; height: 69px; border-right: 4px solid #000; border-bottom: 4px solid #000; background-color: #fff; border-radius: 0 0 17px 0px; transform: rotate(60deg); position: absolute; top: 165px; left: 106px; z-index: -2; overflow: hidden; } .mouth::after { content: ""; width: 105px; height: 63px; border-bottom: 4px solid #000; position: absolute; background-color: yellow; top: -10px; left: -64px; transform: rotate(-64deg); } .trousers-t { width: 110px; height: 50px; background-color: blue; position: absolute; top: 253px; left: 68px; border: 4px solid #000; border-bottom: 0; z-index: 1; } .trousers-t::after { content: ""; width: 110px; height: 9px; position: absolute; background-color: blue; top: 43px; left: 0px; z-index: 2; } .trousers-b { width: 100%; height: 117px; background-color: blue; position: absolute; top: 303px; left: 2px; border: 4px solid #000; } .t-l-blet,.t-r-blet { width: 110px; height: 20px; background-color: blue; border: 3px solid #000; position: absolute; top: -22px; } .t-l-blet { left: -87px; transform: rotate(30deg); } .t-r-blet { left: 79px; transform: rotate(-30deg); } .t-l-blet::after,.t-r-blet::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: #000; position: absolute; } .t-l-blet::after { top: 3px; left: 94px; } .t-r-blet::after { top: 3px; left: 2px; } </style> </head> <body> <div class="wrap"> <div class="hair"> <div class="hair-l"></div> <div class="hair-r"></div> </div> <div class="body"> <div class="eyes"> <div class="eyes-l"> <div class="l-black"> <div class="l-white"></div> </div> </div> <div class="eyes-r"> <div class="r-black"> <div class="r-white"></div> </div> </div> </div> <div class="mouth"></div> <div class="trousers"> <div class="trousers-t"> <div class="t-l-blet"></div> <div class="t-r-blet"></div> </div> <div class="trousers-b"></div> </div> </div> <div class="hand"> <div class="hand-l"></div> <div class="hand-r"></div> </div> <div class="foot"> <div class="foot-l"></div> <div class="foot-r"></div> </div> </div> </body> </html>
執行結果：
