<html> <head> <meta charset="utf-8" /> <title>j绝对定位</title> <style> body { background: -webkit-linear-gradient(top,#2B8BD2 0%,#59D2A5 100%); } .face{ width: 300px; height: 200px; border: 1px solid #ccc; margin: 200px auto; background-color: orange; position:relative; } .ear { width: 45px; height: 200px; background-color: orange; position: absolute; } .ear_left { transform: rotate(-38deg); top: -154px; left: -48px; border-radius: 56px 0 0 0; } .ear_right { transform: rotate(34deg); left: 301px; top: -160px; border-radius: 0 56px 0 0; } .ear_left .a { background-color: #000; width: 100%; height: 52px; border-radius: 56px 0 0 0; } .ear_right .a { background-color: #000; width: 100%; height: 52px; border-radius: 0 56px 0 0; } .eye_left { position:absolute; width:45px; height:45px; border-radius:50%; background:#222; left: 52px; top: 48px; overflow:hidden; } .eye_left .ball_1 { position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:26px; left:10px; } .eye_left .ball_2 { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff; top:12px; left:28px; } .eye_right { position:absolute; width:45px; height:45px; border-radius:50%; background:#222; right: 52px; top: 48px; overflow:hidden; } .eye_right .ball_1 { position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:12px; left:5px; } .eye_right .ball_2 { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff; top:26px; left:27px; } .norse { width: 13px; height: 9px; background: #000; position: absolute; bottom: 66px; left: 139px; border-radius: 0 0 6px 6px; } .mouth{ width: 50px; height: 30px; background: #D80C32; position: absolute; border-radius: 0 0 20px 20px; left: 122px; bottom: 13px; } .lianjia_left { width: 40px; height: 40px; background: red; position: absolute; border-radius:50%; bottom:28px; left:20px; } .lianjia_right { width: 40px; height: 40px; background: red; position: absolute; border-radius:50%; bottom:28px; right:20px; } .blink { animation:blink_frames 5s infinite ease; } @keyframes blink_frames { 0% { height:45px; } 40% { height:5px; top:75px; } 80% { height:5px; top:75px; } 100% { height:45px; top: 48px; } } </style> </head> <body> <div class='face'> <div class='ear ear_left'> <div class='a'></div> </div> <div class='ear ear_right'> <div class='a'></div> </div> <div class='eye_left blink'> <div class='ball_1'></div> <div class='ball_2'></div> </div> <div class='eye_right blink'> <div class='ball_1'></div> <div class='ball_2'></div> </div> <div class='norse'></div> <div class='mouth'></div> <div class='lianjia_left'></div> <div class='lianjia_right'></div> </div> </body> </html>
