css3を使用してThinkPHP Webサイトのロゴを実装しました-php手册-php.cn

css3を使用してThinkPHP Webサイトのロゴを実装しました

WBOY

リリース： 2016-08-20 08:48:16

オリジナル

1424 人が閲覧しました

css3を使用してThinkPHP Webサイトのロゴを実装しました
效果图如下：
<!DOCTYPE html><br> <html><br> <頭><br> <meta charset="utf-8"><br> <meta http-equiv="X-UA-互換性" content="IE=edge,chrome=1"><br> <title>tp_logo</title><br> <meta name="説明" content=""><br> <meta name="キーワード" content=""><br> <style type="text/css"><br> .border{border: 1px solid #000;width:200px;margin: 0 auto}<br> #ロゴ,#left,#right,#bottom{幅: 200ピクセル;高さ: 200ピクセル;}<br> #ロゴ{<br> 背景色: #84C255;<br> border-top-left-radius: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> .wave{<br> フォントファミリー: arial;<br> 変換:スケール(0.9, 0.38) 回転(-64度) スキューX(-50度) スキューY(10度);<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> </style><br> </head><br> <body><br> <center class="border"><br> <div id="logo"><br> <div id="left"></div><br> <div id="right"></div><br> <div id="bottom"></div><br> <div class="line right" id="line1_right"></div><br> <div class="line left" id="line1_left"></div><br> <div class="line right" id="line2_right"></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> </center><br> </body><br> </html>