Heim > php教程 > php手册 > 用css3实现thinkPHP的logo

用css3实现thinkPHP的logo

WBOY
Freigeben: 2016-06-07 11:44:38
Original
1002 Leute haben es durchsucht

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage