“我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”
夏天来一杯冰冰凉凉的冷饮吧 橙子+泰式冷饮 biu~
div布局
<div id="app">
<div class="cz">
<div class="zd"></div>
<div class="xian"></div>
<div class="xiana"></div>
<div class="xianb"></div>
<div class="xianc"></div>
</div>
<div class="czA">
<div class="zdA"></div>
<div class="xianA"></div>
<div class="xianaA"></div>
<div class="xianbA"></div>
<div class="xiancA"></div>
</div>
<div class="ly">
<div class="xg"></div>
<div class="sp"></div>
<div class="spa"></div>
<div class="spb"></div>
</div>
</div>
css样式
.cz{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #E9982F;
border:3px solid #F0EDCE;
position: relative;
top: 706px;
left: 200px;
}
.zd{
width: 20px;
height: 20px;
background-color: #F0EDCE;
border-radius: 20px;//边框圆角
position: absolute;
top: 45%;
left: 45%;
}
.xian{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
}
.xiana{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(90deg) scale(1);//旋转多少度
}
.xianb{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(45deg) scale(1);
}
.xianc{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(-45deg) scale(1);
}
#app{
height: 1000px;
width: 100%;
background-image: linear-gradient(to top , #5CAEAF, #CCE9EA);//渐变背景色
}
.czA{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #F1C555;
border:3px solid #F0EDCE;
position: relative;
left: 900px;
top: 550px;
}
.zdA{
width: 20px;
height: 20px;
background-color: #F0EDCE;
border-radius: 20px;
position: absolute;
top: 45%;
left: 45%;
}
.xianA{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
}
.xianaA{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(90deg) scale(1);
}
.xianbA{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(45deg) scale(1);
}
.xiancA{
width: 200px;
height: 1px;
background-color: #F0EDCE;
position: absolute;
top: 100px;
transform:rotate(-45deg) scale(1);
}
.ly{
width: 150px;
height: 200px;
border:1px solid #fff;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
position: relative;
left: 600px;
top: 90px;
background-color: #FEE45D;
box-shadow: 3px 3px 3px #84D1D7;
opacity: 0.9;
border-top: 50px solid #fff;
}
.xg{
width: 10px;
height: 330px;
position: absolute;
bottom: 30px;
border:1px solid #F19E74;
background-color: #F19E74;
left: 45%;
z-index: 9;
}
.sp{
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #F0C55F;
position: relative;
left: 20px;
top: 150px;
}
.spa{
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #F0C55F;
position: relative;
left: 100px;
top: 150px;
}
.spb{
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #F0C55F;
position: relative;
left: 130px;
top: 100px;
}
