AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
 

纯CSS实现一个微信logo，需要几个标签？

博客已迁移至http://lwzhang.github.io。

纯 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;
    }

下图时现在的结果：

里面的四个圆怎么画呢？可以利用 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);
    }

<span class="hljs-selector-class">.inner</span><span class="hljs-selector-pseudo">::after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">30px</span> <span class="hljs-number">10px</span>;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#fff</span> transparent transparent transparent;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">155px</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-<span class="hljs-number">45deg</span>);
}

最终效果：

全部css代码：

    @mixin pos($left, $top) {
      position: absolute;
      left: $left;
      top: $top;
    }

<span class="hljs-selector-class">.bg</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#08c406</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
  <span class="hljs-attribute">position</span>: relative;

  &amp;<span class="hljs-selector-pseudo">::before</span> {
   <span class="hljs-keyword">@include</span> pos(<span class="hljs-number">155px</span>, <span class="hljs-number">150px</span>);
   <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">16px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">16px</span>;
   <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
   <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#08c406</span>;
   <span class="hljs-attribute">z-index</span>: <span class="hljs-number">2</span>;
   <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">70px</span> <span class="hljs-number">0</span> <span class="hljs-number">#08c406</span>, -<span class="hljs-number">70px</span> -<span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">#08c406</span>, <span class="hljs-number">0</span> -<span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">#08c406</span>;
  }

  &amp;<span class="hljs-selector-pseudo">::after</span> {
   <span class="hljs-keyword">@include</span> pos(<span class="hljs-number">50px</span>, <span class="hljs-number">182px</span>);
   <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
   <span class="hljs-attribute">border-width</span>: <span class="hljs-number">30px</span> <span class="hljs-number">12px</span>;
   <span class="hljs-attribute">border-style</span>: solid;
   <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#fff</span> transparent transparent transparent;
   <span class="hljs-attribute">transform</span>: rotate(<span class="hljs-number">45deg</span>);
 }

 <span class="hljs-selector-class">.inner</span> {
   <span class="hljs-attribute">width</span>: <span class="hljs-number">180px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;
   <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
   <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;
   <span class="hljs-keyword">@include</span> pos(<span class="hljs-number">35px</span>, <span class="hljs-number">60px</span>);

   &amp;<span class="hljs-selector-pseudo">::before</span> {
    <span class="hljs-keyword">@include</span> pos(<span class="hljs-number">90px</span>, <span class="hljs-number">60px</span>);
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">140px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">120px</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#08c406</span>;
   }

   &amp;<span class="hljs-selector-pseudo">::after</span> {
    <span class="hljs-keyword">@include</span> pos(<span class="hljs-number">200px</span>, <span class="hljs-number">155px</span>);
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">30px</span> <span class="hljs-number">10px</span>;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#fff</span> transparent transparent transparent;
    <span class="hljs-attribute">transform</span>: rotate(-<span class="hljs-number">45deg</span>);
   }
  }
}

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

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