阅读 432

css3绘制github logo

1. 概述

最近整理CSS和大家分享一下使用 CSS3 绘制github 的章鱼猫 Logo 的过程。

先上一张全景图

屏幕快照 2021-08-17 19.45.38.png

网上经常能看到一些通过border属性实现的圆形,椭圆形,三角形。这里主要用到的就是CSSborder属性。通过border-radius来设置矩形的圆角。

border-radius最多可指定四个值,分别是左上角,右上角,右下角和左下角。也可以分别设置每个角的值,而且可以精确到角度的XY轴的值。

// 左上角
border-top-left-radius: 40px 80px;
// 右上角
border-top-right-radius: 40px 80px;
// 左下角
border-bottom-right-radius: 40px 80px;
// 右下角
border-bottom-left-radius: 40px 80px;
复制代码

40px80px分别表示X轴参与弯曲弧度的部分为40pxY轴参与弯曲的弧度为80px

屏幕快照 2021-08-17 19.36.48.png

2. 开始绘制

章鱼猫的所有部位都是通过div元素标签绘制再通过定位进行组合,首先绘制出头部的轮廓。通过设置四个角度的圆角画出大饼脸。

position: absolute;
border: 1px solid red;
width: 268px;
height: 204px;
left: 116px;
top: 77px;
border-top-left-radius: 137px 94px;
border-top-right-radius: 137px 94px;
border-bottom-left-radius: 105px 95px;
border-bottom-right-radius: 104px 82px;
复制代码

屏幕快照 2021-08-17 19.42.46.png

加上耳朵。

position: absolute;
border: 1px solid red;
width: 60px;
height: 60px;
transform: rotate(12deg);
top: 66px;
left: 133px;
border-top-right-radius: 150px 36px;
border-bottom-left-radius: 43px 95px;
复制代码

屏幕快照 2021-08-17 19.44.37.png

五官

屏幕快照 2021-08-17 19.45.01.png

胡须

position: absolute; 
height: 8px;
width: 98px;
top: 222px;
left: 26px;
border-top-left-radius: 98px 10px;
border-top: 1px solid red;
复制代码

屏幕快照 2021-08-17 19.45.18.png

四只脚和小尾巴,可以使用border属性来设置。

border-right: 6px solid red;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
复制代码

不过这里偷懒了,直接使用模块绘制的。

屏幕快照 2021-08-17 19.45.38.png

3. 填充颜色

整体完成之后添加上颜色。

屏幕快照 2021-08-17 20.14.00.png

已经变得有模有样了,继续~

屏幕快照 2021-08-17 20.20.10.png

最后装饰一下小尾巴!

屏幕快照 2021-08-17 20.29.35.png

完成!

文章分类
前端
文章标签