欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

div+css文字“本来”_html/css_WEB-ITnose

程序员文章站 2022-05-05 20:34:51
...

Document


*{

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;

}


div+css文字“本来”_html/css_WEB-ITnose

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频