您的位置：首页 > Web前端 > CSS

纯css实现一只敲可爱的兔子

2017-12-03 11:31 330 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background: rgb(209,180,140);
}
.rabit{
width: 300px;
height: 300px;
position: relative;
margin: 120px auto;
}
.head{
width: 222px;
height: 213px;
border-radius: 148px/154px 154px 115px 115px;;
background: linear-gradient(1deg,#e2e2e2 1%,white 16%,white);
box-shadow: 0 0 2px 0 white;
position: absolute;
z-index: 2;
left: 39px;
top: 43px;
}
.ear{
width: 65px;
height: 128px;
background: white;
box-shadow: 0 0 2px 0 white;
border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
position: absolute;
left: 65px;
top: -49px;
transform: rotateZ(-24deg);
}
.ear.right{
transform: scale(-1,1) rotateZ(-24deg);
left: 173px;
top: -51px;
}
.innerear{
width: 50px;
height: 100px;
background: white;
box-shadow: 0 0 2px 0 white;
background:linear-gradient(-196deg,#e2e2e2 9%,white);
border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
transform: rotateZ(-24deg);
position: absolute;
left: 73px;
top: -33px;
}
.innerear.right{
transform:scale(-1,1) rotateZ(-24deg);
left: 179px;
top: -35px;
}
.eye{
width: 48px;
height: 6px;
background:black;
border-radius: 3px;
position: absolute;
left: 65px;
top: 119px;
z-index: 3;
transform: rotate(-2deg);
}
.eye.right{
left: 195px;
top: 119px;
transform: rotate(2deg);
}
.shy{
width: 31px;
height: 5px;
border-radius: 10px 10px 10px 10px/10px 10px 10px 10px;
background-image: linear-gradient(135deg, transparent, transparent 45%, #dc3912, transparent 65%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 65%, transparent 100%);
background-size: 9px 10px;
background-repeat: repeat-x;
background-position: 4px 0;
position: absolute;
left: 72px;
top: 150px;
z-index: 3;
transform: rotate(4deg);
animation: yang 1s infinite alternate;
}
.shy.right{
left: 194px;
top: 151px;
transform: rotate(-8deg);
}
.mouth{
width: 16px;
height: 10px;
border: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-left: 4px solid transparent;
border-top: 4px solid transparent;
border-radius: 50%;
transform:scale(-1.2,1) rotate(43deg);
position:absolute;
left: 126px;
top: 154px;
z-index: 3;
animation: luo 1s infinite alternate;
}
.mouth.right{
transform:scale(1.2,1) rotate(43deg);
position:absolute;
left: 146px;
top: 154px;
}
.body{
width: 128px;
height: 140px;
box-shadow: 0 0 2px 0 white;
background: -webkit-radial-gradient(50% 0%,farthest-side circle,#CDC9C9 2%,white 50%,white);
position: absolute;
left: 85px;
top: 219px;
z-index: 1;
border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;
}
.arm{
width: 43px;
height: 100px;
box-shadow: 0 0 2px 0 white;
background:linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
border-radius: 120px 120px 280px 280px/120px 120px 800px 800px;
position: absolute;
left: 59px;
top: 225px;
transform: rotate(25deg);
}
.arm.right{
left: 200px;
top: 225px;
background:linear-gradient(66deg,#e2e2e2 8%,white 37%,white);
transform: rotate(-17deg);
}
.leg{
width: 38px;
height: 62px;
box-shadow: 0 0 2px 0 white;
background: linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
border-radius: 120px 120px 680px 280px/120px 120px 800px 800px;
position: absolute;
left: 88px;
top: 313px;
transform: rotate(-3deg);
}
.leg.right{
background: linear-gradient(-66deg,#e2e2e2 18%,white 37%,white);
transform: scale(-1,1) rotate(-3deg);
left: 173px;
top: 313px;
}
@keyframes luo{
form{width: 16px;height: 8px;}
to{width: 12px;height: 10px;}
}
@keyframes yang{
form{background-position: 4px 0;}
to{background-position: 12px 0;}
}
</style>
</head>
<body>
<div class="rabit">
<div class="ear"></div>
<div class="innerear"></div>
<div class="ear right"></div>
<div class="innerear right"></div>
<div class="eye"></div>
<div class="eye right"></div>
<div class="shy"></div>
<div class="shy right"></div>
<div class="mouth"></div>
<div class="mouth right"></div>
<div class="head"></div>
<div class="body"></div>
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg"></div>
<div class="leg right"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 纯css实现一只敲可爱的兔子

相关文章推荐

新的分享

章节导航