当前位置：首页 > news >正文

用CSS3画了一只猫

news 2025/8/4 2:49:15

在这里插入图片描述

感觉我写得技术含量不高，全都是用绝对定位写的，一定会有更好的，代码量更少的做法吧

<!DOCTYPE html>
<html>
<head><title>Cute Cat</title><style type="text/css">*{box-sizing: border-box;}:root{--brown: #470000;}body{background-color: #ffd2d2;}.cat {position: absolute;top: 25%;left: 50%;transform: translate(-50%, -50%);margin: 50px auto 0;}.cat .ear{position: absolute;width: 160px;height: 90px;background-color: #fff;border-radius: 52% / 52% ;border: 2px solid var(--brown);z-index: 5;padding: 16px;}.cat .ear>div{width: 100%;height: 100%;background-color: #fc1717;border-radius: 52% / 52% ;border: 1px solid #333}.cat .ear1{top: 0;left: -16px;transform: rotate(45deg);}.cat .ear2{top: 0;right: -16px;transform: rotate(135deg);}.cat .head{position: relative;width: 300px;height: 220px;background-color: #ffffff;border-radius: 50%;border: 2px solid var(--brown);z-index: 8;overflow: hidden;}.cat .head .decoration{position: absolute;top: -60px;left: 50%;transform: translateX(-50%);height: 120px;width:  62px;background-color: #eee5bc;border-radius: 50%;border: 2px solid var(--brown);overflow: hidden;}.cat .head .decoration::after{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 120px;width:  30px;border-radius: 50%;border: 2px solid var(--brown);}.cat .eye{position: absolute;width: 58px;height: 50px;border-radius: 50%;border: 1px solid var(--brown)}.cat .eye1{top: 78px;left: 60px;}.cat .eye1::before{content: '';position: absolute;top: -10px;left: -12px;height: 20px;width: 20px;border-bottom: 1px solid var(--brown);border-radius: 33%;transform: rotate(20deg);}.cat .eye1::after{content: '';position: absolute;top: 0;left: -16px;height: 20px;width: 20px;border-bottom: 1px solid var(--brown);border-radius: 33%;transform: rotate(20deg);}.cat .eye2{top: 78px;right: 60px;}.cat .eye2::before{content: '';position: absolute;top: -10px;right: -12px;height: 20px;width: 20px;border-bottom: 1px solid var(--brown);border-radius: 33%;transform: rotate(-20deg);}.cat .eye2::after{content: '';position: absolute;top: 0;right: -16px;height: 20px;width: 20px;border-bottom: 1px solid var(--brown);border-radius: 33%;transform: rotate(-20deg);}.cat .eye>div{position: absolute;bottom: 2px;right: 2px;border-radius: 50% 50% 50% 50%;background-image: radial-gradient(circle,#fff 0%, #fff 12%, var(--brown) 22%, var(--brown) 100%);height: 34px;width: 36px;}.cat .mouth-wrap{position: absolute;bottom: 18px;left: 50%;transform: translateX(-50%);}.cat .mouth-wrap .nose{position: relative;width: 26px;height: 18px;border-radius: 50%;background-color: var(--brown);padding-top: 5px;padding-left: 2px;z-index: 4;}.cat .mouth-wrap .nose>div{background: #fff;width: 8px;height: 4px;border-radius: 50%;filter: blur(2px);}.cat .mouth-wrap .fossa1{position: absolute;top: 18px;left: -16px;border-radius: 50%;width: 30px;height: 10px;border-bottom: 1px solid var(--brown);transform: rotate(-26deg);background-color: #fff;z-index: 3;}.cat .mouth-wrap .fossa2{position: absolute;top: 18px;right: -16px;border-radius: 50%;width: 30px;height: 10px;border-bottom: 1px solid var(--brown);transform: rotate(26deg);background-color: #fff;z-index: 3;}.cat .mouth-wrap .mouth{position: relative;width: 22px;height: 40px;background-color: #ff7070;border-radius: 50%;margin: 0 auto;border: 1px solid var(--brown);z-index: 2;}.cat .beard1{position: absolute;bottom: 20px;left: 40px;}.cat .beard1>div{width: 42px;height: 16px;border-top: 2px solid var(--brown);border-radius: 33%;transform: rotate(-8deg);}.cat .beard2{position: absolute;bottom: 20px;right: 40px;}.cat .beard2>div{width: 42px;height: 16px;border-top: 2px solid var(--brown);border-radius: 33%;transform: rotate(8deg);}.cat .body{position: relative;top: -70px;width: 300px;height: 260px;background-color: #fff;border-radius: 50%;border: 2px solid var(--brown);z-index: 7;overflow: hidden;}.cat .body .ribbon{position: relative;top: -166px;width: 300px;height: 260px;background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 174, 0));border-radius: 50%;border: 2px solid var(--brown);z-index: 2;}.cat .body .bell{position: absolute;top: 80px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;border-radius: 50%;background-color: rgb(255, 255, 0);border: 2px solid var(--brown);z-index: 1;}.cat .body .bell::before{content: '';position: absolute;width: 50px;height: 20px;top: 18px;left: 50%;transform: translateX(-50%);border-radius: 50%;border-top: 2px solid var(--brown);}.cat .body .bell .hole{position: absolute;width: 2px;height: 16px;bottom: 0;left: 50%;transform: translateX(-50%);border-radius: 50%;background-color:  var(--brown);}.cat .body .bell .hole::before{content: '';position: absolute;top: 0;width: 8px;height: 8px;left: 50%;transform: translateX(-50%);border-radius: 50%;background-color:  var(--brown);}.cat .body .left-hand{}.cat .body .left-hand>div:nth-child(1){position: absolute;top: -10px;right: 48px;width:  180px;height: 180px;border-radius: 50%;border: 2px solid var(--brown);clip-path: polygon( 58% 100%, 100% 60%, 100% 100%);}.cat .body .left-hand>div:nth-child(2){position: absolute;top: 40px;right: 30px;width:  160px;height: 160px;border-radius: 50%;border: 2px solid var(--brown);clip-path: polygon( 38% 100%, 100% 60%, 100% 100%);}.cat .body .left-hand>div:nth-child(3){position: absolute;top: 150px;right: 98px;width: 60px;height: 60px;border-radius: 50%;border: 2px solid var(--brown);background-color: #fff;overflow: hidden;}.cat .body .left-hand>div:nth-child(3)::before{content: '';position: absolute;top: 7px;left: -3px;width:  20px;height: 20px;border-bottom: 2px solid var(--brown);border-radius: 33%;transform: rotate(-8deg);}.cat .body .left-hand>div:nth-child(3)::after{content: '';position: absolute;top: 23px;width:  20px;height: 20px;border-bottom: 2px solid var(--brown);border-radius: 33%;transform: rotate(-8deg);}.cat .foot1{position: absolute;bottom: 62px;left: 36px;width:  60px;height: 40px;border-radius: 40%;background-color: rgb(253, 253, 253);border: 2px solid var(--brown);transform: rotate(16deg);z-index: 1;}.cat .foot2{position: absolute;bottom: 62px;right: 36px;width:  60px;height: 40px;border-radius: 40%;background-color: rgb(255, 255, 255);border: 2px solid var(--brown);transform: rotate(-16deg);z-index: 1;}.cat .finger-wrap{position: absolute;top: 140px;left: -80px;background: #fff;width:  70px;height: 50px;border-radius: 33%;border: 2px solid var(--brown);transform: rotate(150deg);z-index: 10;}.cat .finger-wrap>div:nth-child(1){position: absolute;background: #fff;height: 40px;width: 30px;border-radius: 0 0 50% 50%;border: 2px solid var(--brown);border-top: none;top: 40px;left: 16px;}.cat .finger-wrap>div:nth-child(2){position: absolute;background: #fff;height: 40px;width: 30px;border-radius: 0 0 50% 50%;border: 2px solid var(--brown);border-top: none;top: 28px;left: -17px;transform: rotate(36deg);}.cat .finger-wrap>div:nth-child(3){position: absolute;background: #fff;height: 40px;width: 30px;border-radius: 0 0 50% 50%;border: 2px solid var(--brown);border-top: none;top: 29px;left: 52px;transform: rotate(-36deg);}.cat .right-arm1{position: absolute;top: 103px;left: -52px;width: 180px;height: 180px;border-radius: 50%;border: 2px solid var(--brown);clip-path: polygon( 0 0, 0% 100%, 100% 100%);background-color: #fff;z-index: 0;}.cat .right-arm2{position: absolute;top: 59px;left: -30px;width: 160px;height: 160px;border-radius: 50%;border: 2px solid var(--brown);clip-path: polygon( 0 43%, 0% 100%, 100% 100%);background-color: #ffd2d2;z-index: 1;}</style>
</head>
<body><div class="cat"><div class="ear ear1"><div></div></div><div class="ear ear2"><div></div></div><div class="head"><div class="decoration"></div><div class="eye eye1"><div></div></div><div class="eye eye2"><div></div></div><div class="mouth-wrap"><div class="nose"><div></div></div><div class="fossa1"></div><div class="fossa2"></div><div class="mouth"></div></div><div class="beard1"><div></div><div></div><div></div></div><div class="beard2"><div></div><div></div><div></div></div></div><div class="body"><div class="ribbon"></div><div class="bell"><div class="hole"></div></div><div class="left-hand"><div></div><div></div><div><div></div></div></div></div><div class="right-arm1"></div><div class="right-arm2"></div><div class="finger-wrap"><div></div><div></div><div></div></div><div class="foot1"></div><div class="foot2"></div></div>
</body>
</html>