您现在的位置:圣剑网 >> 文章频道 >> 网站技术 >> 正文
纯CSS设计实现一个微信logo
新闻来源:文章频道发布时间:2016-02-04 23:59我有话说(1)

纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现。我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个标签了。

首先需要两个标签元素:

   <div class="bg">
        <div class="inner"></div>
    </div>

先画个背景:

    .bg {
        width: 300px;
        height: 300px;
        background-color: #08c406;
        border-radius: 10px;
        position: relative;
    }

再画个大的椭圆:

    .inner {
        width: 180px;
        height: 150px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 35px;
    }

小的椭圆利用.inner的::before伪元素实现:

    &::before {
        content: "";
        width: 140px;
        height: 120px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 90px;
        border: 2px solid #08c406;
    }

下图时现在的结果:

图3.png

里面的四个圆怎么画呢?可以利用CSS3的box-shadow属性实现,一般重复性的东西都会用这个属性,因为它可以制造出无数个一模一样的东西出来。

利用.bg的::before伪元素实现这些圆:

    &::before {
       content: "";
       position: absolute;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background-color: #08c406;
       top: 150px;
       left: 155px;
       z-index: 2;
       box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
    }

::before本身会实现一个圆(一个小圆),然后利用box-shadow属性实现其它的三个圆。

来看看现在的效果:

图2.png

现在就剩下两个角了,想想还有哪些东西没用上?还有两个伪元素,分别是.bg的::after和.inner的::after,刚好可以实现两个角。

这两个角其实就是平常的小三角,然后再旋转个45度,CSS实现小三角太常见了:

    .bg::after {
        content: "";
        border-width: 30px 12px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        top: 182px;
        left: 50px;
        transform: rotate(45deg);
    }
    .inner::after {
        content: "";
        border-width: 30px 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        top: 155px;
        left: 200px;
        transform: rotate(-45deg);
    }

最终效果:

图1.png

全部css代码:

    @mixin pos($left, $top) {
      position: absolute;
      left: $left;
      top: $top;
    }
    .bg {
      width: 300px;
      height: 300px;
      background-color: #08c406;
      border-radius: 10px;
      position: relative;
      &::before {
       @include pos(155px, 150px);
       content: "";
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background-color: #08c406;
       z-index: 2;
       box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
      }
      &::after {
       @include pos(50px, 182px);
       content: "";
       border-width: 30px 12px;
       border-style: solid;
       border-color: #fff transparent transparent transparent;
       transform: rotate(45deg);
     }
     .inner {
       width: 180px;
       height: 150px;
       border-radius: 50%;
       background-color: #fff;
       @include pos(35px, 60px);
       &::before {
        @include pos(90px, 60px);
        content: "";
        width: 140px;
        height: 120px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #08c406;
       }
       &::after {
        @include pos(200px, 155px);
        content: "";
        border-width: 30px 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        transform: rotate(-45deg);
       }
      }
    }

画这个logo最难的地方应该就是实现四个小圆的时候,因为CSS3不太熟的人可能不会想到利用box-shadow去实现。

大家还有其它的方法实现微信logo吗?有没有一个标签就能实现的?欢迎留下你的实现方式。

网友评论

关于圣剑 - 广告服务 - 招聘信息 - 友情连接 - 保护隐私权 - 意见反馈 - 帮助中心 - 联系我们

Copyright © 2016 Sjian.Net Inc. All Rights Reserved.大千网络科技有限公司 版权所有

不良信息举报中心 陕ICP备10005927号 陕公网安备61010402000003号