使用css实现git图标

实现一个简单的图标有好多种形式,这一期咱们来尝试使用纯CSS来实现一下,很有趣哦。
话不多说,咱们直接看最终的效果,然后就一步一步分析实现的具体方法:
分析
开始之前,我们得分析一下这个图标的结构,不然的话也不知道从那里开始下手。乍一看,这个图标还是有些负责。不过,都是由些基本图形组成。仔细分析,一共一个正方形、两条线、三个圆。那么,如果这些基本图形能用CSS实现,最终拼装一下不就可以了吗。好,那么我们的任务就是:
- 实现一个正方形:颜色是橘色,并旋转45deg;
- 实现一条线,上面两个圆,中间一个,尾巴上一个;
- 再实现一条线,尾巴上一个圆;
- 最后把各个图形位置整合一下即可。
开始
经过如上分析,那么我们写起代码来就有头绪了。就开始我们的实现吧。
实现正方形
好吧,这个实在是有些简单,看下面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。希望通过今天的分享大家都有所收获,下期再见。