【html源码-一键复制查看效果】
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {position: relative;width: 300px;height: 260px;background-color: #55ff7f;border-radius: 20%;margin: 10% auto 5%;transition: all 0.6s;}.box:hover {transform: scale(1.2);}.headBox {position: relative;z-index: 5;width: 280px;height: 250px;border-radius: 300px;background-color: #fff;transform: rotate(-15deg);}.e1 {position: absolute;top: 30px;left: -25px;z-index: 1;width: 90px;height: 90px;border-radius: 50%;background-color: #000;transform: rotate(45deg);}.e2 {position: absolute;top: -20px;left: 174px;z-index: 1;width: 90px;height: 90px;border-radius: 50%;background-color: #000;transform: rotate(45deg);}.eye1 {position: absolute;top: 95px;left: 174px;z-index: 1;width: 73px;height: 75px;/* 不规则的圆形写法 */border-radius: 40% 60% 48% 52% / 50% 61% 39% 50%;background-color: #000;transform: rotate(-6deg);}.eye2 {position: absolute;top: 110px;left: 45px;z-index: 1;width: 73px;height: 75px;border-radius: 66% 34% 48% 52% / 60% 54% 46% 40%;background-color: #000;transform: rotate(20deg);}.y {position: absolute;top: 41px;left: 18px;z-index: 1;width: 40px;height: 10px;border: 4px solid #fff;border-radius: 50% 50% 0 0 / 100% 100% 0 0;border-bottom: none;transform: rotate(-23deg);}.nose {position: absolute;top: 175px;left: 135px;z-index: 1;width: 40px;height: 25px;border-radius: 50%;background-color: #000;}.mouth {position: absolute;top: 205px;left: 137px;z-index: 1;width: 40px;height: 20px;/* 半圆线条 */border: 1px solid black;border-radius: 0 0 50% 50%/0 0 100% 100%;border-top: none;}</style></head><body><div class="box"> <!-- 耳朵 --><div class="e1"></div><div class="e2"></div> <!-- 头 --><div class="headBox"> <!-- 眼睛 --><div class="eye1"><div class="y"></div></div><div class="eye2"><div class="y"></div></div> <!-- 鼻子 --><div class="nose"></div> <!-- 嘴巴 --><div class="mouth"></div></div></div></body>
</html>
