用html5制作叮当猫,【 H5EDU问答】怎么使用border-radius做机器猫的嘴?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Document

.mat{

margin-left: 200px;

margin-top: 100px;

animation: myfirst 5s linear infinite alternate ;

position: relative;

animation-iteration-count:

}

@keyframes myfirst{

0% {left:0px; top:0px;}

/*25% {left:200px; top:0px;}

50% {left:200px; top:200px;}

75% {left:0px; top:200px;}

100% {left:0px; top:0px;}*/

100%{left: 1000px;top: 0px;}

}

.head{

width: 200px;

height: 200px;

background: rgb(50,174,230);

border-radius: 92px /100px;

z-index: 1;

border:1px solid black;

}

.eye{

position: relative;

left:53px;

top: 25px;

z-index: 2;

}

.left,.right{

width: 45px;

height: 55px;

background: white;

border: 1px solid black;

border-radius: 20px;

/*display: inline-block;

position: relative;*/

float: left;

}

.left div,.right div{

width: 10px;

height: 10px;

background: black;

border-radius: 5px;

}

.left div{

position: relative;

left:30px;

top:30px;

}

.right div{

position: relative;

left:5px;

top: 30px;

}

.face{

width: 165px;

height: 130px;

background: white;

position: relative;

top: 50px;

left:18px;

border-radius: 80px/60px;

z-index: 1;

}

.nose{

width: 20px;

height: 20px;

background: red;

border:1px solid black;

border-radius: 10px;

position: relative;

top:24px;

left:71px;

/*transition: width 2s,height 2s;*/

}

/*.nose:hover{

width: 50px;

height: 50px;

}*/

.shu{

height: 60px;

width: 0;

border:1px solid black;

position: relative;

top:22px;

left: 81px;

z-index: 1;

}

.goatee1 p,.goatee2 p{

width: 40px;

border-top: 1px solid black;

line-height: 10px;

margin-top: -8px;

}

.goatee1 p{

position: relative;

top: -35px;

left:15px;

}

.goatee2 p{

position: relative;

top:-62px;

left:110px;

}

.div1{

width: 100px;

height: 50px;

background: black;

border-radius: 50px/25px;

margin-left: 5px

}

.div2{

width: 110px;

height: 50px;

border-radius: 55px/25px;

background: white;

margin-top: -53px;

}

.mouth{

position: relative;

top:-78px;

left:28px;

/*z-index: -1;*/

}

.necklace{

width: 160px;

height: 16px;

background: rgb(144,20,4);

border:1px solid black;

border-radius: 8px;

position: relative;

top: -30px;

left: 20px;

z-index: 1;

}

.bell{

width: 24px;

height: 24px;

background: yellow;

border:1px solid black;

border-radius: 12px;

position: relative;

top:8px;

left:66px;

z-index: 1;

}

.div3,.div4{

width: 100%;

height: 0;

border-top: 1px solid black;

/*margin-top:10px; */

}

.div3{

margin-top: 5px;

margin-bottom: 2px;

}

.cirle{

width: 6px;

height: 6px;

background: black;

border-radius: 3px;

position: relative;

top:3px;

left:9px;

}

.div5{

width: 0;

height: 4px;

border:1px solid ;

position: relative;

top:3px;

left:11px;

}

.body{

width: 160px;

height: 115px;

background:rgb(50,174,230) ;

position: relative;

top: -38px;

left: 20px;

border:1px solid black;

}

.pocket{

width: 110px;

height: 110px;

background: white;

border:1px solid black;

border-radius: 55px;

position: relative;

top:-15px;

left:25px;

}

.pocket div{

width: 90px;

height: 45px;

background: white;

border:1px solid black;

border-radius: 0 0 90px 90px/

90px 90px 90px 90px;

position: relative;

top:55px;

left:10px;

}

.arm1,.arm2{

width: 40px;

height: 30px;

background: rgb(50,174,230);

border-top: 1px solid black;

border-bottom:1px solid black

}

.arm1{

position: relative;

top:-112px;

left:-40px;

}

.arm2{

position: relative;

top:-145px;

left:160px;

}

.hand1,.hand2{

width: 30px;

height: 30px;

background: white;

border:1px solid black;

border-radius: 15px;

position: relative;

}

.hand1{

top:-176px;

left:-55px;

}

.hand2{

top:-209px;

left:185px;

}

.div6{

width: 16px;

height: 8px;

background: white;

border-top:1px solid black;

border-right: 1px solid black;

border-left: 1px solid black;

border-radius: 16px 16px 0 0/16px;

position: relative;

top:-133px;

left:72px;

}

.foot1,.foot2{

width: 85px;

height: 20px;

background: white;

border:1px solid black;

border-radius: 10px;

position: relative;

}

.foot1{

top:-134px;

left:-8px;

}

.foot2{

top:-156px;

left:82px;

}

.p1,.p6{

transform: rotate(15deg);

}

.p3,.p4{

transform: rotate(-15deg);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值