微信LOGO-(CSS)

最新推荐文章于 2022-10-26 13:33:43 发布

weixin_33832340

最新推荐文章于 2022-10-26 13:33:43 发布

阅读量1.2k

点赞数

原文链接：https://juejin.im/post/5bee724ee51d4543850fe27f

版权

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信LOGO</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        figure {
            width: 600px;
            height: 600px;
            margin: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #eeeeee;
        }

        .left {
            width: 300px;
            height: 260px;
            background-color: #88e753;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            top: 40%;
            left: 40%;
            transform: translate(-50%, -50%);
        }

        .left::before, .left::after {
            content: ' ';
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50px;
            background-color: #e0e2e3;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

        .left::before {
            left:80px;
        }

        .left::after {
            left: 180px;
        }

        .right {
            width: 260px;
            height: 200px;
            background-color: #ffffff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(-50%, -50%);
        }

        .right::before, .right::after {
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50px;
            background-color: #e0e2e3;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

        .right::before {
            left: 60px;
        }

        .right::after {
            left: 140px;
        }

       .msg::before, .msg::after{
           content:'';
           width: 0px;
           height: 0px;
           position: absolute;
           border-width: 35px;
           border-style: solid;
       }

       .msg::before {
           left: 23%;
           top: 57%;
           border-color: transparent transparent #88e753;
           transform: rotate(210deg);
       }

       .msg::after{
            left: 63%;
            top: 63%;
            border-color: transparent transparent #ffffff;
            transform: rotate(159deg);
       }

    </style>
</head>
<body>
    <figure>
        <div class="left"></div>
        <div class="right"></div>
        <div class="msg"></div>
    </figure>
</body>
</html>复制代码

效果图:

转载于:https://juejin.im/post/5bee724ee51d4543850fe27f

weixin_33832340

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信LOGO-(CSS)

代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信LOGO</title> <style type="text/css"> * { margin: 0...
复制链接

扫一扫