纯css小黄人
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小黃人</title><link rel="stylesheet" href="css/xhr.css">
</head>
<body><div class="wrap"><!-- 頭發 --><div class="xhr_hair"><div class="xhr_hair1"></div><div class="xhr_hair2"></div></div><!-- 身體 --><div class="xhr_body"><!-- 眼睛 --><div class="xhr_eyes"><div class="xhr_eyesl"><div class="xhr_eyesl_black"></div><div class="xhr_eyesl_witer"></div></div><div class="xhr_eyesr"><div class="xhr_eyesr_black"></div><div class="xhr_eyesr_witer"></div></div></div><!-- 嘴巴 --><div class="xhr_mouth"></div><!-- 褲子 --><div class="xhr_trousers"><!-- 褲子上部分 --><div class="xhr_trousers_t"><!-- 肩帶 --><div class="t_l_belt"></div><div class="t_r_belt"></div></div><!-- 褲子下部分 --><div class="xhr_trousers_b"></div></div></div><!-- 手臂 --><div class="xhr_hand"><div class="xhr_hand_l"></div><div class="xhr_hand_r"></div></div><!-- 腳 --><div class="xhr_foot"><div class="xhr_foot_l"></div><div class="xhr_foot_r"></div></div></div>
</body>
</html>
css部分
.wrap {width: 400px;height: 600px;margin: 0 auto;border: 1px solid red;position: relative; } /*設定小黃人高度*/ .xhr_body {height: 400px;width: 250px;position: absolute;top: 50%;transform: translate(-50%,-50%); /*上下居中*/left: 50%;background-color: yellow;border: 5px solid #000;border-radius: 125px;overflow: hidden; /*身體定義了溢出隱藏*/ } /*定位頭發 兩根頭發都在一個hair的盒子里 可以先把兩根頭發疊在一起造 型，然后利用hair盒子定位后使用top定位*/ .xhr_hair1,.xhr_hair2 {height: 100px;width: 130px;/*border-left: 10px solid #000;*/border-top: 10px solid #000;border-radius: 50%;position: absolute;animation: hair 5s ease-in infinite; /* 頭發動畫*/ } @keyframes hair {10%,50%,100% {transform: rotate(40deg);}20% {transform: rotate(45deg);}80% {transform: rotate(45deg);} } .xhr_hair {position: absolute;top: 7px; } .xhr_hair1 {left: 98px;top: 60px;transform: rotate(40deg);} .xhr_hair2 {left: 100px;top: 73px;transform: rotate(40deg);}/*手臂*/ .xhr_hand_l,.xhr_hand_r {height: 100px;width: 100px;border: 5px solid #000;position: absolute;border-radius: 30px;z-index: -1;background: yellow;} .xhr_hand_l {left: 50px;top: 300px;transform: rotate(120deg);} .xhr_hand_r {top: 300px;right: 50px;transform: rotate(-120deg); } .xhr_hand_l::after,.xhr_hand_r::after {content: "";position: absolute;height: 10px;width: 50px;background: #000;border-radius: 5px; } .xhr_hand_l::after {left: 30px;top: 73px; } .xhr_hand_r::after {/*left: 20px;*/right: 30px;top: 73px; }/*腿部*/ .xhr_foot_l,.xhr_foot_r {height: 60px;width: 40px;background: #000;position: absolute;z-index: -1; } .xhr_foot_l {left: 150px;bottom: 50px; } .xhr_foot_r {right: 150px;bottom: 50px; } .xhr_foot_l::after,.xhr_foot_r::after {content: "";height: 40px;width: 60px;background: #000;border-radius: 20px;position: absolute;top: 20px; } .xhr_foot_l::after {left: -35px; } .xhr_foot_r::after {right: -35px; }/*眼睛*/ .xhr_eyes {/*border: 1px solid red;*/position: absolute;top: 60px;left: 25px; /*不給父元素定寬高，直接用定位計算出左邊距，然后利用子元素撐開高*/ } .xhr_eyesl,.xhr_eyesr {width: 90px;height: 90px;border-radius: 50%;border: 5px solid #000;float: left;background: #fff; } .xhr_eyesl::after,.xhr_eyesr::after {content: "";width: 30px;height: 20px;background: #000;position: absolute;top: 28px; } .xhr_eyesl::after {left: -25px;/*top: 28px;*/transform: rotate(20deg); } .xhr_eyesr::after {right: -25px; transform: rotate(-20deg); } /*眼睛內部*/ .xhr_eyesl_black,.xhr_eyesr_black {height: 50px;width: 50px;background: #000;border-radius: 50%;position: absolute;top: 25px;animation: blackeyes 5s ease-in infinite; /* 黑眼珠動畫*/ } @keyframes blackeyes {10%,50%,100% {transform: translate(0);}20% {transform: translate(16px);}80% {transform: translate(-16px);} } .xhr_eyesl_black {left: 25px; } .xhr_eyesr_black {right: 25px; } .xhr_eyesl_witer,.xhr_eyesr_witer {height: 20px;width: 20px;position: absolute;background: #fff;border-radius: 50%;top: 40px;animation: witer 5s ease-in infinite; } @keyframes witer {10%,50%,100% {transform: translate(0);}20% {transform: translate(16px,5px); /* x,y軸同時運動*/}80% {transform: translate(-16px,5px);} } .xhr_eyesl_witer {left: 50px; } .xhr_eyesr_witer {right: 50px; }/*嘴巴 使用兩個盒子疊加*/ .xhr_mouth {height: 35px;width: 60px;background-color: #FFF;border-radius: 0 0 0 30px;position: absolute;top: 200px;left: 90px;border: 5px solid #000;transform: rotate(-30deg); } .xhr_mouth::after {content: "";height: 39px;width: 82px;left: 1px; background: yellow;position: absolute;transform: rotate(30deg);border-bottom: 5px solid #000;top: -21px; }/*褲子*/ .xhr_trousers {position: absolute;top: 260px;/*border: 1px solid red;*/height: 140px;width: 100%;} .xhr_trousers_t {height: 50px;width: 150px;background: blue;border: 5px solid #000;position: absolute;/*left: 45px; */left: 50%;transform: translate(-50%);border-bottom: none;z-index: 999; } .xhr_trousers_b {width: 100%;height: 85px;background: blue;border-top: 5px solid #000;position: absolute;top: 50px; }/*褲子的肩帶*/ .t_l_belt,.t_r_belt {height: 20px;width: 100px;background: blue;border: 5px solid #000;position: absolute;top: -24px; } .t_l_belt {transform: rotate(35deg);left: -74px; } .t_r_belt {transform: rotate(-35deg);right: -74px; } .t_l_belt::after,.t_r_belt::after {content: "";height: 10px;width: 10px;background: #000;border-radius: 50%;position: absolute;top: 5px; } .t_l_belt::after {right: 5px; } .t_r_belt::after {left: 5px; }總結
- 上一篇： XDOJ 317 输出完全二叉树的某一层
- 下一篇： 推荐一款串口调试助手（win10，无广告