ホームページ > php教程 > php手册 > css3を使用してThinkPHP Webサイトのロゴを実装しました

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

WBOY
リリース: 2016-08-20 08:48:16
オリジナル
1446 人が閲覧しました

css3を使用してThinkPHP Webサイトのロゴを実装しました
效果图如下:
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>

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート