Implemented ThinkPHP website logo using css3
- WBOYOriginal
- 2016-08-20 08:48:161459browse
Implemented a ThinkPHP website logo using css3
效果图如下：
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="utf-8"><br>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br>
<title>tp_logo</title><br>
<meta name="description" content=""><br>
<meta name="keywords" content=""><br>
<style type="text/css"><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>
transform:rotate(45deg);<br>
left: -140px;<br>
background-color: #6FB737;<br>
position: absolute;<br>
}<br>
#right{<br>
transform:rotate(45deg);<br>
right: -140px;<br>
background-color: #6FB737;<br>
position: absolute;<br>
}<br>
#bottom{<br>
transform:rotate(45deg);<br>
top: 140px;<br>
background-color: #5E9C2F;<br>
position: absolute;<br>
}<br>
.wave{<br>
font-family: arial;<br>
transform:scale(0.9, 0.38) rotate(-64deg) skewX(-50deg) skewY(10deg);<br>
font-size: 400px;<br>
color:#FFF;<br>
position: absolute;<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>