用CSS3画了一只猫

已于 2023-04-12 23:00:11 修改
阅读量2.1k 收藏 8
点赞数 7
文章标签： css3 css html
于 2023-03-26 14:35:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951592/article/details/129779176
版权

在这里插入图片描述

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

<!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>

更新分割线

2.0 胖版

请添加图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Cute Cat</title>
    <style type="text/css">
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #ffd2d2;
        }
        :root{
            --brown: #470000;
        }
        .cat {
            position: absolute;
            top: 35%;
            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: 7;
            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;
            clip-path: polygon( 0 42%, 0 100%, 100% 100%, 100% 42%);
        }
        .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;
            top: 84px;
            width: 58px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid var(--brown);
            z-index: 12;
        }
        .cat .eye1{
            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{
            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;
        }
        .face{
            position: absolute;
            width: 346px;
            height: 169px;
            background-color: #ffffff;
            border-radius: 50%;
            border: 2px solid var(--brown);
            z-index: 8;
            top: 54px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9;
            clip-path: polygon( 0 25.3%, 0 100%, 100% 100%, 100% 25.3%);

        }
    </style>
</head>
<body>
    <div class="cat">
        <div class="ear ear1">
            <div></div>
        </div>
        <div class="ear ear2">
            <div></div>
        </div>
        <div class="eye eye1">
            <div></div>
        </div>
        <div class="eye eye2">
            <div></div>
        </div>
        <div class="face">
            <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="head">
            <div class="decoration"></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>
har01d
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
纯CSS3绘制的小猫笑脸动画
08-29
纯CSS3绘制的小猫笑脸动画
纯css小猫
一只程序媛
02-16 1202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css小猫</title> <style> *{padding:0;margin: 0;} li{list-style:none;} body{background:#f6f7f2;}
纯CSS实现猫咪
臧小川的博客
01-10 232
效果图 index import React from 'react' import styles from './style.less' const index = () => { return ( <div> <div className={styles.container} > <div className={styles.wrapper}>
纯css画猫
【03】的博客
02-10 276
核心：定位，伪类，圆角，过渡，阴影 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cat</title> <style type="text/css"> *{margin:0;padding:0;} #cat{width: 500px;height: 500px;margin:50px auto;position: relative;}..
html5用圆圈画猫,css画一只猫.html
weixin_29098117的博客
06-01 442
Title.container{}.face,.ear {position: absolute;width: 400px;height: 360px;left: 50%;top: 50%;margin-left: -200px;margin-top: -180px;}.face{border: 2px solid #000;z-index: 10;border-radius: 50% 50% 34...
纯css3绘制一只会笑的猫动画特效
09-08
本教程将深入探讨如何使用纯CSS3技术来创建一个会笑的猫动画特效，这是一项既有趣又有挑战性的实践项目。通过这个过程，我们可以学习到CSS3的关键帧动画、伪类选择器、变换、过渡以及盒模型等多个核心概念。 首先，...
纯css3绘制卡通猫咪动画特效
07-24
这个动画特效展示了一只卡通化的黑色猫咪，既可爱又生动，能够吸引用户的注意力，常用于网站的装饰或者互动元素。 在CSS3中，我们可以利用`@keyframes`规则来定义动画的关键帧，通过改变时间百分比来控制元素在不同...
CSS3 SVG猫和狗表白动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一款可爱的“猫和狗表白动画特效”。CSS3（层叠样式表第三版）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，而SVG（可缩放矢量图形）是...
纯css3绘制卡通猫喝水动画
04-25
【纯CSS3绘制卡通猫喝水动画】是一种利用CSS3的强大功能来实现的网页动画效果，无需JavaScript或者其他编程语言，只需通过CSS3的属性就能创建出一个动态的、可爱的卡通猫喝水场景。这个特效展示了CSS3在图形绘制和...
利用CSS3实现平移动画效果示例代码
09-24
《邓大福是一只猫》 《Nothing On You》 ``` CSS3样式代码： ```css .test1-img { width: 50%; height: 10%; overflow: hidden; margin-left: 250px; } figure { position: relative; overflow: hidden...
可爱极了，用 CSS 实现一个超可爱的猫咪！
祈澈菇凉
01-09 830
介绍本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css来完成，所以，通过本期的动画，你可以到一些css动画和绘制的一些技巧。正...
css3绘制黑色可爱的小猫咪和爱心图形动画特效
W Y L
04-26 930
这个是用css3绘制黑色可爱的小猫咪，如果喜欢的你们可以试一下哦~ html代码 <body> <div class="container"> <div class="cat"> <div class="face"> <div class="ear-left"> <div class="in...
HTML5+CSS期末大作业：宠物网站设计——宠物猫(10页) DIV+CSS宠物网页设计代码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
11-17 7500
HTML5期末大作业：宠物网站设计——宠物猫(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网
html5 画猫全过程svg入门
家门口种果树，不怕馋
07-10 2794
下面所有信息均来自http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started SVG，代表为S calable V ector G raphics，是XML的应用程序，使得它可以在一个紧凑的，便携的形式表示图形信息。SVG利息迅速增长，各大公司已经提供工具来创建和查看SVG文件。本章开始与计算机图形学的两大系统...
canvas抱着爱心的小猫代码
ICode联盟
04-10 388
Canvas抱着爱心的喵咪HTML5代码，一款html5基于canvas绘制简单可爱的捧着心的小猫咪图形特效。 dd:
CSS3模拟小仓鼠一直奔跑的动画特效
xingyu_qie的专栏
04-05 4572
今天就通过CSS3来实现一只一直奔跑着的小仓鼠。
纯css画龙猫
Waterme_lon的博客
05-27 2975
HTML代码部分： Document <div id="baymax"> <!-- 定义头部 眼睛嘴巴 --> <div id="head"> <div id="div1"></div> <div id="div2"></div> <div id="div4"></di...
css3 动画只执行一次
最新发布
05-31
可以使用CSS3的animation属性来实现动画只执行一次，具体方法是设置animation-iteration-count为1。例如，下面这段CSS代码可以使一个元素的动画只执行一次： ``` .element { animation: myanimation 1s; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值