运用css3圆角制作一只叮当猫

1.了解border-radius属性

  • border-radius:0px;一个值时调四个角的圆角
  • border-radius:0px 0px;两个值时调左上右下、右上左下
  • border-radius:0px 0px 0px;三个值时调左上、右上左下、右下
  • border-radius:0px 0px 0px 0px;四个值时调左上、右上、右下、左上
  • border-radius:0px 0px 0px 0px **/** 0xp 0px 0px 0px;/ 前面代表x轴的左上、右上、右下、左上，/ 后面代表y轴的左上、右上、右下、左上
  • 如果想调正圆则需要一个正方形，四个角都调成一样

 2.叮当猫头部
熟悉了圆角的属性我们就可以通过浏览器来调出想要的圆角形状了。

/* 叮当猫头部 */
.wrap .head{
width: 310px;height: 262px;border: 2px solid #000;margin: 10px auto 0px;
background: #08b9e3;position: relative;z-index: 4;
border-radius:170px 168px 90px 90px/170px 168px 130px 130px ;
}

3.叮当猫的脸

脸部的制作和头部差不多

/* 叮当猫的脸 */
.wrap .head .face{
width: 268px;height: 180px;border: 2px solid #000;
position: absolute;bottom: 0px;left: 50%;
margin-left: -134px ;background-color: #fff;
border-radius: 120px 120px 68px 68px/115px 115px 87px 87px;
}

4.叮当猫的眼睛和鼻子


这部分我是通过定位把眼睛和鼻子移动到需要的位置，鼻子部分则是我前面说的制作正圆的方法做的。

/* 叮当猫的眼睛 */
.wrap .head .eyes{
    width: 72px;height: 88px;border: 2px solid #000;
    position: absolute;top: 42px;left: 81px;;background-color: #fff;
    border-radius: 36px 42px 40px 40px/36px 44px 37px 44px
}
.wrap .head .eyes span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;
    position: absolute;bottom: 18px;right: 14px;
    }
.wrap .head .eyes2{
    width: 72px;height: 88px;border: 2px solid #000;
    position: absolute;top: 42px;right: 80px;background-color: #fff;
    border-radius: 42px 36px 40px 40px/44px 36px 44px 37px;
}
.wrap .head .eyes2 span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;
    position: absolute;bottom: 18px;left: 14px;
    }
/* 叮当猫的鼻子 */
.wrap .head .nose{
    width: 32px;height: 32px;border: 2px solid #000;border-radius: 50%;
    position: absolute;top: 118px; left: 50%;margin-left: -16px;
    background-color: #ca3e01;
}

5.叮当猫的毛和嘴巴


叮当猫的胡须我用了 transform: skewY(-16deg)；倾斜的效果，还加了一个动画效果，可惜你们看不到QAQ。

/* 叮当猫的嘴巴 */
.wrap .head .mouth{
    width: 84px;height: 90px;border-left: 2px solid #000;border-bottom: 2px solid #000;
    position: absolute;top: 154px;right: 68px;
    border-radius: 0px 0px 83px 0px/0px 0px 36px 0px;
}
.wrap .head .mouth2{
    width: 84px;height: 90px;border-bottom: 2px solid #000;
    position: absolute;top: 154px;left: 72px;
    border-radius: 0px 0px 0px 83px/0px 0px 0px 36px;
}
/* 叮当猫的毛 */
.wrap .head .mao{
width: 58px;height: 64px;position: absolute;top: 126px;right: 42px;
animation: hz 0.5s infinite;
}
.wrap .head .mao span{margin-top: 18px;}
.wrap .head .mao :first-child{
display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);
}
.wrap .head .mao :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao :nth-child(3){
display: block;border-bottom: 2px solid #000;transform: skewY(16deg);
}
.wrap .head .mao2{
width: 58px;height: 64px;position: absolute;top: 126px;left: 42px;
animation: hz1 0.5s infinite;
}
.wrap .head .mao2 span{margin-top: 18px;}
.wrap .head .mao2 :first-child{
display: block;border-bottom: 2px solid #000;transform: skewY(16deg);
}
.wrap .head .mao2 :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao2 :nth-child(3){
display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);
}
@keyframes hz {from{transform: translateX(0px);}to{transform: translateX(-10px);}}
@keyframes hz1 {from{transform: translateX(0px);}to{transform: translateX(10px);}}

6.叮当猫的铃铛部分

/* 叮当猫的铃铛部分 */
.wrap .xq{
    width: 230px;height: 22px;border: solid 2px #000;z-index: 4;
    background: #af2a01;position: absolute;top:310px;left: 50%;margin-left: -115px;
    border-radius: 50px;
}
.wrap .xq .dd{
    width: 26px;height: 26px;background: #f5ed26;border: 2px solid #000;
    position: absolute;bottom: -12px;left: 100px;z-index: 4;
    border-radius: 50px;
}
.wrap .xq .dd span{display: block;}
.wrap .xq .dd :nth-child(1){
    width: 24px;height: 2px;border: 2px solid #474747;margin-top: 8px;border-radius: 10px;
   
}
.wrap .xq .dd :nth-child(2){
    width: 6px;height: 6px;background: #000;position: absolute;bottom: 6px;left: 50%;
    margin-left: -3px;border-radius: 50%;

}
.wrap .xq .dd :nth-child(3){
    background: black;height: 2px;width: 10px;transform: rotate(90deg);
    position: absolute;bottom: 2px;left: 50%;margin-left: -5px;
}

 

7.完成叮当猫


叮当猫的身体部分与上面的操作差不多，我就不放代码了。要注意的是z-index:;定位层级的关系，其他的都是慢慢调圆角需要的是时间罢了。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{width: 400px;height: 500px;margin: 40px auto;background: pink;overflow: hidden;}

/* 叮当猫头部 */
.wrap .head{
    width: 310px;height: 262px;border: 2px solid #000;margin: 10px auto 0px;
border-radius:170px 168px 90px 90px/170px 168px 130px 130px ;background: #08b9e3;position: relative;z-index: 4;
}
/* 叮当猫的脸 */
.wrap .head .face{width: 268px;height: 180px;border: 2px solid #000;position: absolute;bottom: 0px;left: 50%;
margin-left: -134px ;border-radius: 120px 120px 68px 68px/115px 115px 87px 87px;background-color: #fff;
}
/* 叮当猫的眼睛 */
.wrap .head .eyes{
    width: 72px;height: 88px;border: 2px solid #000;position: absolute;top: 42px;left: 81px;
    border-radius: 36px 42px 40px 40px/36px 44px 37px 44px;background-color: #fff;
}
.wrap .head .eyes span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;position: absolute;bottom: 18px;
    right: 14px;
    }
.wrap .head .eyes2{
    width: 72px;height: 88px;border: 2px solid #000;position: absolute;top: 42px;right: 80px;
    border-radius: 42px 36px 40px 40px/44px 36px 44px 37px;background-color: #fff;
}
.wrap .head .eyes2 span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;position: absolute;bottom: 18px;
    left: 14px;
    }
/* 叮当猫的鼻子 */
.wrap .head .nose{
    width: 32px;height: 32px;border: 2px solid #000;border-radius: 50%;position: absolute;top: 118px; left: 50%;margin-left: -16px;background-color: #ca3e01;
}
/* 叮当猫的嘴巴 */
.wrap .head .mouth{
    width: 84px;height: 90px;border-left: 2px solid #000;border-bottom: 2px solid #000;
    border-radius: 0px 0px 83px 0px/0px 0px 36px 0px;position: absolute;top: 154px;right: 68px;
}
.wrap .head .mouth2{
    width: 84px;height: 90px;border-bottom: 2px solid #000;
    border-radius: 0px 0px 0px 83px/0px 0px 0px 36px;position: absolute;top: 154px;left: 72px;
}
/* 叮当猫的毛 */
.wrap .head .mao{width: 58px;height: 64px;position: absolute;top: 126px;right: 42px;animation: hz 0.5s infinite;}
.wrap .head .mao span{margin-top: 18px;}
.wrap .head .mao :first-child{display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);}
.wrap .head .mao :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao :nth-child(3){display: block;border-bottom: 2px solid #000;transform: skewY(16deg);}
.wrap .head .mao2{width: 58px;height: 64px;position: absolute;top: 126px;left: 42px;animation: hz1 0.5s infinite;}
.wrap .head .mao2 span{margin-top: 18px;}
.wrap .head .mao2 :first-child{display: block;border-bottom: 2px solid #000;transform: skewY(16deg);}
.wrap .head .mao2 :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao2 :nth-child(3){display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);}
@keyframes hz {from{transform: translateX(0px);}to{transform: translateX(-10px);}}
@keyframes hz1 {from{transform: translateX(0px);}to{transform: translateX(10px);}}

/* 叮当猫的铃铛部分 */
.wrap .xq{
    width: 230px;height: 22px;border: solid 2px #000;border-radius: 50px;z-index: 4;
    background: #af2a01;position: absolute;top:310px;left: 50%;margin-left: -115px;
}
.wrap .xq .dd{
    width: 26px;height: 26px;background: #f5ed26;border: 2px solid #000;border-radius: 50px;
    position: absolute;bottom: -12px;left: 100px;z-index: 4;
}
.wrap .xq .dd span{display: block;}
.wrap .xq .dd :nth-child(1){
    width: 24px;height: 2px;border: 2px solid #474747;margin-top: 8px;border-radius: 10px;
   
}
.wrap .xq .dd :nth-child(2){
    width: 6px;height: 6px;background: #000;position: absolute;bottom: 6px;left: 50%;margin-left: -3px;
    border-radius: 50%;
}
.wrap .xq .dd :nth-child(3){
    background: black;height: 2px;width: 10px;transform: rotate(90deg);position: absolute;bottom: 2px;left: 50%;margin-left: -5px;
}


/* 叮当猫的身体部分 */
.wrap .body{
    width: 222px;height: 44px;background: #08b9e3;position: absolute;top: 336px;left: 50%;margin-left: -111px;z-index: 2;
}

.wrap .body1{
    width: 220px;height: 100px;border: 2px solid #000;border-top: none;background: #08b9e3;
    position: absolute;top: 380px;left: 50%;margin-left: -112px;z-index: 2;
}
.wrap .body1 :nth-child(1){
    width: 20px;height: 20px;border:2px solid #000;border-radius: 50%;display: block;position: absolute;bottom: -12px;left: 50%;margin-left: -12px;background: pink;
}
.wrap .body1 :nth-child(2){
    width: 20px;height: 7px;border:2px solid transparent;display: block;position: absolute;bottom: -13px;left: 50%;margin-left:-12px;background: pink;
}

.wrap .body2{
    width: 152px;height: 152px;border: 2px solid #000;border-radius: 50%;position: absolute;top: 300px;left: 50%;margin-left: -76px;z-index: 3;background: #fff;
}
.wrap .body2 div{
    width: 120px;height: 120px;border-radius: 50%;position: absolute;top: 20px;left: 50%;margin-left: -60px;
    border: 2px solid #000;z-index: 3;
}
.wrap .body2 span{width: 124px;height: 70px;border-bottom: 2px solid #000;display: block;background: #08b9e3;position: absolute;top: 18px;left: 16px;z-index: 4;background: #fff;}

/* 叮当猫的手 */
.wrap .hand{
    width: 40px;height: 80px;border: 2px solid #000;transform: rotate(56deg);margin-left: 50px;margin-top: 12px;
    position: relative;z-index: 1;background: #08b9e3;
}
.wrap .hand span{width: 60px;height: 60px;border: 2px solid #000;background-color: #fff;position: absolute;bottom: -26px;
left: -12px;border-radius: 50%;}

.wrap .hand1{
    width: 40px;height: 80px;border: 2px solid #000;transform: rotate(-56deg);margin-left: 305px;margin-top: -83px;
    position: relative;z-index: 1;background: #08b9e3;
}
.wrap .hand1 span{width: 60px;height: 60px;border: 2px solid #000;background-color: #fff;position: absolute;bottom: -26px;
left: -12px;border-radius: 50%;}

/* 叮当猫的脚 */
.wrap .foot{
    width: 126px;height: 30px;border: 2px solid #000;background: #fff;margin-top: 67px;margin-left: 68px;
    position: absolute;z-index: 10;border-radius: 38px 24px 50px 25px/31px 27px 29px 19px;;
}
.wrap .foot1{
    width: 126px;height: 30px;border: 2px solid #000;background: #fff;margin-top: 67px;margin-left: 202px;
    position: absolute;z-index: 10;border-radius: 24px 38px 25px 50px/27px 31px 19px 29px;;
}

    </style>
</head>
<body>
    <div class="wrap">
        <!-- 叮当猫的头部 -->
        <div class="head">
            <div class="face"></div>
            <div class="eyes"><span></span></div>
            <div class="eyes2"><span></span></div>
            <div class="nose"></div>
            <div class="mouth"></div>
            <div class="mouth2"></div>
            <div class="mao">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="mao2">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 叮当猫的铃铛 -->
        <div class="xq">
            <div class="dd">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 叮当猫的身体 -->
        <div class="body">
  
        </div>
        <div class="body1">
            <span></span>
            <span></span>
        </div>
        <div class="body2">
            <div></div>
            <span></span>
        </div>
        <!-- 叮当猫的手 -->
        <div class="hand">
            <span></span>
        </div>
        <div class="hand1">
            <span></span>
        </div>
        <!-- 叮当猫的脚 -->
        <div class="foot">

        </div>
        <div class="foot1">

        </div>
    </div>
</body>
</html>
叮当猫代码

 

posted @ 2020-04-05 13:00  mavis1  阅读(170)  评论(0)    收藏  举报