search
Homephp教程php手册Implemented ThinkPHP website logo using css3

Implemented a ThinkPHP website logo using css3
效果图如下:
Implemented ThinkPHP website logo using css3html><br> <br>     <br>         <meta> <br>         <meta> <br>         <title>tp_logo</title> <br>         <meta> <br>         <meta> <br>         <style><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>     <br>     <br>         <center> <br>             <div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>                 <div></div> <br>             </div> <br>         </center> <br>     <br>

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools