热门排行
logo在线设计生成器印刷制作,就找玛雅兔,专业。

教你用纯CSS实现微信LOGO

发布时间:2018/10/11 11:21 编辑:logofish

在这个通讯发达的互联网时代,80岁的老奶奶都会用微信,可见微信用起来是多么简单方便,那么微信LOGO设计也简单方便吗?今天logofish君教大家用纯CSS设计微信LOGO

教你用纯CSS实现微信LOGO

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

首先需要两个标签元素:

    

        

    

先画个背景:

    .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;

    }

下图时现在的结果:

画两个小椭圆

里面的四个圆怎么画呢?可以利用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属性实现其它的三个圆。

来看看现在的效果:

画两个小圆

现在就剩下两个角了,想想还有哪些东西没用上?还有两个伪元素,分别是.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);

    }

最终效果:

CSS微信LOGO最终效果图

全部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吗?有没有一个标签就能实现的?用logo在线制作生成器能生成吗?欢迎交流讨论。

Advert:[left_fixed_adv]