用css3实现thinkPHP的logo

jerry thinkphp 2015年11月18日收藏

用css3绘制thinkPHP的logo
兼容chrome,firefox,safari等主流浏览器

<!DOCTYPE html>
<!-- 此版本为镜花水月根据网络资源所修改,兼容chrome,firefox,safari等主流浏览器 -->
<!-- 原版代码在这里 http://www.thinkphp.cn/code/48.html -->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>tp_logo</title>
        <meta name="description" content="此版本为镜花水月根据网络资源所修改,兼容chrome,firefox,safari等主流浏览器">
        <meta name="keywords" content="CSS3绘制ThinkPHP的logo图标">
        <style type="text/css">
            .border{border: 1px solid #000;width:200px;margin: 0 auto}
            #logo,#left,#right,#bottom{width: 200px;height: 200px;}
            #logo{
                background-color: #84C255;
                border-top-left-radius:30px;
                border-bottom-right-radius:30px; 
                overflow: hidden;
                position: relative; 
            }
            #left{ 
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                left: -140px;
                background-color: #6FB737;
                position: absolute;
            }
            #right{
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                right: -140px;
                background-color: #6FB737;
                position: absolute;
            }
            #bottom{
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                top: 140px;
                background-color: #5E9C2F;
                position: absolute;
            }
            .line{
                position: relative;
                border-left: 38px solid white;
                width: 40px;
                height: 70px;
                border-bottom-left-radius: 78px 60px;
            }
            .right{
                -webkit-transform: rotate(-120deg);
                -moz-transform: rotate(-120deg);
                -o-transform: rotate(-120deg);
            }
            .left{
                -webkit-transform: rotate(60deg);
                -moz-transform: rotate(60deg);
                -o-transform: rotate(60deg);
            }
            #line1_right{
                top:20px;
                left: -28px;
            }
            #line1_left{
                top:19px;
                left: -68px;
            }
            #line2_right{
                top:-70px;
                left: 10px;
            }
            #line2_left{
                top:-71px;
                left: -30px;
            }    
            #line3_right{
                top:-160px;
                left: 48px;
            }
            #line3_left{
                top:-161px;
                left: 10px;
            }    
        </style>
    </head>
    <body>
        <center class="border">
            <div id="logo">
                <div id="left"></div>
                <div id="right"></div>
                <div id="bottom"></div>
                <div class="line right" id="line1_right"></div>
                <div class="line left" id="line1_left"></div>
                <div class="line right" id="line2_right"></div>
                <div class="line left" id="line2_left"></div>
                <div class="line right" id="line3_right"></div>
                <div class="line left" id="line3_left"></div>
            </div>
        </center>
    </body>
</html>