用css3实现thinkPHP的logo
- WBOY原创
- 2016-06-07 11:44:38950浏览
用css3绘制thinkPHP的logo
兼容chrome,firefox,safari等主流浏览器nbsp;html><br>
<!-- 此版本为镜花水月根据网络资源所修改,兼容chrome,firefox,safari等主流浏览器 --><br>
<!-- 原版代码在这里 http://www.thinkphp.cn/code/48.html --><br>
<br>
<br>
<meta>
<br>
<meta>
<br>
<title>tp_logo</title>
<br>
<meta>
<br>
<meta>
<br>
<style><br />
.border{border: 1px solid #000;width:200px;margin: 0 auto}<br />
#logo,#left,#right,#bottom{width: 200px;height: 200px;}<br />
#logo{<br />
background-color: #84C255;<br />
border-top-left-radius:30px;<br />
border-bottom-right-radius:30px; <br />
overflow: hidden;<br />
position: relative; <br />
}<br />
#left{ <br />
-webkit-transform: rotate(45deg);<br />
-moz-transform: rotate(45deg);<br />
-o-transform: rotate(45deg);<br />
left: -140px;<br />
background-color: #6FB737;<br />
position: absolute;<br />
}<br />
#right{<br />
-webkit-transform: rotate(45deg);<br />
-moz-transform: rotate(45deg);<br />
-o-transform: rotate(45deg);<br />
right: -140px;<br />
background-color: #6FB737;<br />
position: absolute;<br />
}<br />
#bottom{<br />
-webkit-transform: rotate(45deg);<br />
-moz-transform: rotate(45deg);<br />
-o-transform: rotate(45deg);<br />
top: 140px;<br />
background-color: #5E9C2F;<br />
position: absolute;<br />
}<br />
.line{<br />
position: relative;<br />
border-left: 38px solid white;<br />
width: 40px;<br />
height: 70px;<br />
border-bottom-left-radius: 78px 60px;<br />
}<br />
.right{<br />
-webkit-transform: rotate(-120deg);<br />
-moz-transform: rotate(-120deg);<br />
-o-transform: rotate(-120deg);<br />
}<br />
.left{<br />
-webkit-transform: rotate(60deg);<br />
-moz-transform: rotate(60deg);<br />
-o-transform: rotate(60deg);<br />
}<br />
#line1_right{<br />
top:20px;<br />
left: -28px;<br />
}<br />
#line1_left{<br />
top:19px;<br />
left: -68px;<br />
}<br />
#line2_right{<br />
top:-70px;<br />
left: 10px;<br />
}<br />
#line2_left{<br />
top:-71px;<br />
left: -30px;<br />
} <br />
#line3_right{<br />
top:-160px;<br />
left: 48px;<br />
}<br />
#line3_left{<br />
top:-161px;<br />
left: 10px;<br />
} <br />
</style>
<br>
<br>
<br>
<center>
<br>
<div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
<div></div>
<br>
</div>
<br>
</center>
<br>
<br>
AD：真正免费，域名+虚机+企业邮箱=0元