Home  >  Article  >  php教程  >  用css3实现thinkPHP的logo

用css3实现thinkPHP的logo

WBOY
WBOYOriginal
2016-06-07 11:44:38983browse

用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元

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn