纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧!
<div class="main">
<div class="head">
<div class="liuhai">
<div class="triangle_border_down"></div>
<div class="triangle_border_down"></div>
<div class="triangle_border_down"></div>
<div class="triangle_border_down"></div>
<div class="face">
<div class="mm clearfix">
<div class="meimao01 me fl"></div>
<div class="meimao02 me fr"></div>
</div>
<div class="yy clearfix">
<div class="yes fl yes01"></div>
<div class="yes fr yes02"></div>
</div>
<div class="zui"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="hudei"></div>
<div class="hud02"></div>
<div class="yu"></div>
</div>
</div>
<style type="text/css">
.main {
width: 500px;
height: 500px;
margin: 200px auto;
}
.triangle_border_down {
float: left;
width: 0;
height: 0;
border-width: 30px 30px 0;
border-style: solid;
border-color: #333333 transparent transparent;
/*灰 透明 透明 */
}
.liuhai {
width: 250px;
height: auto;
margin: 0 auto;
position: relative;
top: 140px;
}
.head {
background-color: #333333;
width: 360px;
/*宽度为高度的2倍*/
height: 300px;
position: relative;
border-radius: 200px 200px 0 0;
/*圆角半径为高度的值*/
}
.face {
background: #ffffff;
width: 240px;
/*宽度为高度的2倍*/
height: 220px;
border: 1px solid #333333;
border-radius: 0 0 200px 200px;
/*圆角半径为高度的值*/
}
.left {
width: 30px;
height: 60px;
/*高度为宽度的2倍*/
border-radius: 25px 0 0 25px;
/*圆角半径为宽度的值*/
background: #FFFFFF;
position: absolute;
left: -20px;
top: 60px;
}
.right {
height: 60px;
/*高度为宽度的2倍*/
width: 30px;
position: absolute;
right: -15px;
top: 60px;
border-radius: 0 25px 25px 0;
/*圆角半径为宽度的值*/
background: #FFFFFF;
}
.fl {
float: left;
}
.fr {
float: right;
}
.yes {
-webkit-animation: fade 5s ease infinite;
-moz-animation: fade 5s ease infinite;
animation: fade 5s ease infinite;
}
.yy {
margin-top: 10px;
}
.yes01 {
margin-left: 60px;
}
.yes02 {
margin-right: 60px;
}
.me {
width: 50px;
height: 20px;
border-top: 3px solid #333333;
border-radius: 20px 20px 0 0;
}
.meimao01 {
margin-left: 40px;
}
.meimao02 {
margin-right: 40px;
}
.zui {
width: 70px;
height: 50px;
border-radius: 0 0 60px 60px;
background: red;
position: relative;
top: 50px;
left: 85px;
}
.hudei {
width: 0;
height: 0;
border-width: 50px 50px 0;
border-style: solid;
border-radius: 60px;
position: absolute;
right: 17px;
top: 5px;
transform: rotate(-35deg);
border-color: orangered transparent transparent;
}
.hud02 {
width: 0;
height: 0;
border-width: 50px 50px 0;
border-style: solid;
border-radius: 60px;
position: absolute;
right: -10px;
top: 40px;
transform: rotate(135deg);
border-color: orangered transparent transparent;
}
.yu {
width: 40px;
height: 40px;
border: 1px solid #FFFFFF;
background: orangered;
border-radius: 50px;
position: absolute;
right: 34px;
top: 23px;
}
</style>