Heim > Artikel > Web-Frontend > div+css文字“本来”_html/css_WEB-ITnose
div+css文字“本来”_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:30920Durchsuche
*{
margin: 0;
padding:0;
}
.main_obj{
width: 500px;
height: 240px;
/*background-color: #9cf;*/
margin:0 auto;
margin-top: 200px;
}
.ben_main,.lai_main{
height: 230px;
width: 220px;
overflow: hidden;
float: left;
/*background-color: #cccccc;*/
}
.ben{
background-color: #464646;
position: relative;
}
.ben_1{
height: 25px;
width:190px;
top: 45px;
left: 14px;
}
.ben_2{
width: 25px;
height:234px;
left: 95px;
}
.ben_3{
width: 143px;
height: 220px;
border: 20px solid #464646;
position:relative ;
border-radius:100px;
top: -177px;
left:17px;
}
.ben_4{
width: 80px;
height: 25px;
top: -330px;
left:68px;
}
.lai_main{
float: right;
/*background-color:#ccc ;*/
}
.lai_1{
top: -140px;
}
.lai_2{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius:100px ;
position: relative;
top: -151px;
left: -13px;
}
.lai_3{
height: 40px;
width: 180px;
overflow: hidden;
/*background-color: red;*/
position: relative;
top: -441px;
left: 25px;
}
.lai_4{
width: 20px;
height: 40px;
background-color:#98b821 ;
position: relative;
top: -482px;
left: 38px;
transform:rotate(35deg);
}
.lai_4:before{
content: "";
display: block;
width: 15px;
height: 20px;
background-color: #ffffff;
position: relative;
left: -15px;
top: 4px;
}
.lai_5{
transform:rotate(145deg);
position: relative;
left: 155px;
top: -522px;
}
.lai_5:before{
content: "";
position: relative;
left: -15px;
top: 15px;
}
.lai2_out{
height: 61px;
width: 188px;
/* background-color: #0092DC; */
position: relative;
top: -446px;
left: 15px;
overflow: hidden;
transform: rotate(2deg);
}
.lai2_1{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius: 100px;
position: relative;
top:-142px;
}
.lai2_2{
width: 20px;
height: 33px;
background-color: #98b821;
position: relative;
top: -183px;
transform: rotate(45deg);
left: 27px
}
.lai2_2:before{
content: "";
display: block;
width: 23px;
height: 34px;
background-color: #ffffff;
position: relative;
top: 0px;
left: -23px;
}
.lai2_3{
transform:rotate(135deg);
top: -222px;
left: 150px;
}
.lai2_3:before{
position: relative;
top: 13px;
left: -23px;
}