用css3實作了ThinkPHP網站logo-php手册-PHP中文網

首頁

php教程

php手册

用css3實作了ThinkPHP網站logo

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 20, 2016 am 08:48 AM

用css3實作了個ThinkPHP網站logo
效果圖如下：
用css3實作了ThinkPHP網站logo <br> <br> <br> <br> <meta> <br> tp_logo標題><br> <br> <br> <br> .border{邊框：1pxsolid#000；寬度：200px；邊距：0auto}<br> #logo,#left,#right,#bottom{寬度: 200 像素;高度: 200 像素;}<br> #標誌{<br> 背景色：#84C255；<br> 以左上方邊框半徑：30px；<br> ‧右下邊框半徑：30px； <br> 溢出：隱藏；<br> 職務：對位； <br> }<br> #左{ <br> 轉換：旋轉（45度）；<br> 左：-140px；<br> 背景色：#6FB737；<br> 位置：絕對；<br> }<br> #對了{<br> 轉換：旋轉（45度）；<br> 右：-140px；<br> 背景色：#6FB737；<br> 位置：絕對；<br> }<br> #底部{<br> 轉換：旋轉（45度）；<br> 以上方：140 像素；<br> 背景色：#5E9C2F；<br> 位置：絕對；<br> }<br> .波{<br> 的字體系列：arial；<br> 轉換：縮放（0.9，0.38）旋轉（-64度）skewX（-50deg）skewY（10deg）；<br> 字體大小：400px；<br> 顏色：#FFF；<br> 位置：絕對；<br> text-shadow: -0.5px -0.5px 0.25px #171617;display: none;<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{transform:rotate(-120deg);}<br> .left{transform:rotate(60deg);}<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> <br> <br> <br> <center> <br> <div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div class="line left" id="line1_left"></div> <br> <div></div> <br> <div class="line left" id="line2_left"></div> <br> <div class="line right" id="line3_right"></div> <br> <div class="line left" id="line3_left"></div> <br> </div> <br> 中心><br> 身體><br> </center>