>  기사  >  php教程  >  CSS3를 사용하여 ThinkPHP 웹사이트 로고 구현

CSS3를 사용하여 ThinkPHP 웹사이트 로고 구현

WBOY
WBOY원래의
2016-08-20 08:48:161426검색

CSS3를 사용하여 ThinkPHP 웹사이트 로고 구현
效果图如下:
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>

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.