编程-学习-思考

使用css实现git图标

使用css实现git图标

实现一个简单的图标有好多种形式,这一期咱们来尝试使用纯CSS来实现一下,很有趣哦。

话不多说,咱们直接看最终的效果,然后就一步一步分析实现的具体方法:



分析

开始之前,我们得分析一下这个图标的结构,不然的话也不知道从那里开始下手。乍一看,这个图标还是有些负责。不过,都是由些基本图形组成。仔细分析,一共一个正方形、两条线、三个圆。那么,如果这些基本图形能用CSS实现,最终拼装一下不就可以了吗。好,那么我们的任务就是:

  1. 实现一个正方形:颜色是橘色,并旋转45deg;
  2. 实现一条线,上面两个圆,中间一个,尾巴上一个;
  3. 再实现一条线,尾巴上一个圆;
  4. 最后把各个图形位置整合一下即可。

开始

经过如上分析,那么我们写起代码来就有头绪了。就开始我们的实现吧。

实现正方形

好吧,这个实在是有些简单,看下面CSS就知道了:

.git-logo {
    height: 150px;
    width: 150px;
    background-color: #f06033;
    border-radius: 15px;
    position: relative;
    transform: rotate(45deg);
}

长宽一样 150px,然后背景橘黄色,指定边框圆角15px,然后再旋转45deg,最终第一步就完美完成了:



实现第一条线+两个圆

线好实现,就相当于一个长方形吗。圆的实现方法应该有好多种吧,我们这里用指定边框圆角的方式来完成。就是把 border-radius 指定成正方形边长的一半,轻松搞定。

不过,还有最后一个困难,就是指定两个圆和这条线的相对关系。这里我们采用伪元素::before 和::after,来指定。顾名思义,before 就是再画线之前就开始执行,after就是再画线之后执行。这样做的好处就是,相对位置比较好找。不过,如果还有一个圆,那就有点不够用了哦。可以再拆分一条线哈哈。

好,说了这么多,看最终的代码吧:

.line1 {
    width: 110px;
    background-color: white;
    height: 10px;
    top: 40px;
    position: absolute;
}

.line1::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 30px;
}

.line1::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 90px;
}

来看看到目前为止的效果吧,是不是有点那意思了。



实现第二条线+一个圆

有了第一条线的经验,那么第二条实现起来也不是什么难事。模仿一下,稍微修改一下参数即可。不过,考虑到第二条线的相对位置,那还是要旋转45deg的。来,看实现的代码:


.line2 {
    width: 90px;
    background-color: white;
    height: 12px;
    top: 70px;
    left: 30px;
    position: absolute;
    transform: rotate(45deg);
}

.line2::after {
    content: "";
    width: 30px;
    background-color: white;
    height: 30px;
    border-radius: 50%;
    top: -8px;
    left: 70px;
    position: absolute;
}

因为只有一个圆,在 before 或 after 实现都是可以的。

那好,最后再看一下我们的成果吧,是不是看起来比之前多了几分灵气。



结语

好了,今天就分享到这里,后期带来更多的图标CSS。希望通过今天的分享大家都有所收获,下期再见。