前端通过CSS伪类实现腾讯游戏logo

前端开发详细流程
web前端模块化开发流程
web前端混合开发流程

看到有人用css伪类做箭头,自己尝试一下用这个原理做了一个腾讯游戏的logo
代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            body {
                background: #fff;
            }
            #logo {
                background-color: #51535d;
                border: 1px solid #27282f;
                width: 110px;
                height: 40px;
                padding: 10px 20px;
            }
            strong {
                color: #fff;
                float: left;
                padding-left: 20px;
                line-height: 40px;
            }
            .dm {
                margin-top: 10px;
                width: 10px;
                height: 20px;
                float: left;
                background-color: #51535d;
                position: relative;
            }
            #demo:after,
            #demo:before {
                border: solid transparent;
                content: ‘ ‘;
                height: 0;
                left: 100%;
                position: absolute;
                width: 0;
            }
            #demo:after {
                border-width: 10px;
                border-top-color: #035cb3;
                top: 20px;
                left: 0;
            }
            #demo:before {
                border-width: 10px;
                border-bottom-color: #f9d201;
                top: -20px;
                left: 0;
            }
            /* */
            #demo2:after,
            #demo2:before {
                border: solid transparent;
                content: ‘ ‘;
                position: absolute;
                width: 0px;
            }
            #demo2:after {
                border-width: 10px;
                border-left-color: #ff7600;
                top: 0px;
                left: 10px;
            }
            #demo2:before {
                border-width: 10px;
                border-right-color: #c0db1d;
                top: 0px;
                left: -30px;
            }
        </style>
    </head>
    <body>
        <div id=”logo”>
            <div id=”demo” class=”dm”></div>
            <div id=”demo2″ class=”dm”></div>
            <strong>游戏中心</strong>
        </div>
    </body>
</html>
企业级开发前端框架
游戏开发前端框架
java 前端开发框架
» 本文来自:前端开发者 » 《前端通过CSS伪类实现腾讯游戏logo》
» 本文链接地址:https://www.rokub.com/6609.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!