CSS3를 사용하여 ThinkPHP 웹사이트 로고 구현
- WBOY원래의
- 2016-08-20 08:48:161426검색
CSS3를 사용하여 ThinkPHP 웹사이트 로고 구현
效果图如下：
<!DOCTYPE html><br>
<html><br>
<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>
#로고,#왼쪽,#오른쪽,#하단{너비: 200px;높이: 200px;}<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>
상단: 140px;<br>
배경색: #5E9C2F;<br>
위치: 절대;<br>
}<br>
.wave{<br>
글꼴 계열: arial;<br>
변환:크기(0.9, 0.38) 회전(-64deg) 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>
</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>
<br>
</본문><br>