css3を使用してThinkPHP Webサイトのロゴを実装しました
- WBOYオリジナル
- 2016-08-20 08:48:161426ブラウズ
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>