我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
今年是新的一年，兔年，所以最好的就是用我们所学的知识或者工作技能实现一个兔子给大家拜年！！！
知识点
css实现兔子主要就是用到了border-radius。
border-radius
border-radius 属性是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写形式，使用border-radius可以同时设置四个 border-*-radius 属性。border-radius 属性的格式如下：
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
语法说明如下：
border-radius属性可以接收两组参数，参数之间使用斜杠/进行分隔，每组参数都允许设置 1~4 个参数值，其中第一组参数代表圆角水平方向上的半径或半轴，第二组参数代表圆角垂直方向上的半径或半轴，如果省略第二组参数的值，那么该组参数将直接沿用第一组参数的值。- 第一组参数中，如果提供全部的四个参数，那么将按照上左
top-left、上右top-right、下右bottom-right、下左bottom-left的顺序作用于元素的四个角；如果提供三个参数，那么第一个参数将作用于元素的左上角top-left，第二个参数将作用于元素的右上角top-right和左下角bottom-left，第三个参数将作用于元素的右下角 bottom-right；如果提供两个参数，那么第一个参数将作用于元素的左上角top-left和右下角bottom-right，第二个参数将作用于元素的右上角top-right和左下角bottom-left；如果只提供一个参数，那么该参数将同时作用于元素的四个角。 - 第二组参数同样遵循第一组参数的规律，只是作用的方向不同。
实现
整体的html代码
<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>
实现头部
就是利用了border-radius,
.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;
}
结尾
那么现在应该完整的兔子就实现出来了 效果如下：
