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

用css3实现thinkPHP的logo

WBOY
Libérer: 2016-06-07 11:44:38
original
1002 Les gens l'ont consulté

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal