如何创作用纯 CSS 绘制一支栩栩如生的铅笔

一时失言乱红尘 2023-06-04 04:52 10阅读 0赞

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181122121840921-28878556.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/PaZYBw][https_codepen.io_comehope_pen_PaZYBw]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cEQqefK][https_scrimba.com_p_pEgDAM_cEQqefK]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义dom, 容器中包含笔头、笔杆（包含文字）和橡皮 3 部分：

<div class="pencil">
        <span class="taper"></span>
        <span class="barrel">made in China</span>
        <span class="eraser"></span>
    </div>

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightskyblue;
    }

定义铅笔的尺寸：

.pencil {
        position: relative;
        width: 50em;
        height: 3.5em;
    }

画出笔杆：

.pencil .barrel {
        position: absolute;
        width: 40em;
        left: 4em;
        background-color: green;
        border-top: 1em solid forestgreen;
        border-bottom: 1em solid darkgreen;
    }

设置笔杆上文字的样式：

.pencil .barrel {
        line-height: 1.5em;
        font-family: sans-serif;
        text-transform: uppercase;
        color: silver;
        text-align: center;
    }

用伪元素画出笔头：

.pencil .taper::before,
    .pencil .taper::after {
        content: '';
        position: absolute;
        left: -4em;
        border-style: solid;
        border-width: calc(3.5em / 2) 4em;
    }
    
    .pencil .taper::before {
        border-color: transparent burlywood transparent transparent;
    }
    
    .pencil .taper::after {
        border-color: transparent green transparent transparent;
        transform: scale(0.3);
    }

画出橡皮：

.pencil .eraser {
        position: absolute;
        right: 0;
        width: 6em;
        height: 1.5em;
        background-color: lightpink;
        border-top: 1em solid pink;
        border-bottom: 1em solid lightcoral;
        border-top-right-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }

用伪元素画出橡皮上的铁箍：

.pencil .eraser::before {
        content: '';
        position: absolute;
        top: -1em;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        background-color: silver;
        border-top: 1em solid lightgray;
        border-bottom: 1em solid gray;
    }

最后，增加阴影：

.pencil {
        filter: drop-shadow(5px 10px 3px gray);
    }

大功告成！

原文地址：[https://segmentfault.com/a/1190000015153865][https_segmentfault.com_a_1190000015153865]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[img2018-cnblogs-com_blog_1504257_201811_1504257-20181122121840921-28878556.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181122121840921-28878556.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=/wp-content/uploads/2018/11/front-end-daily-challenges-master/041-pencil&demotitle=纯%20CSS%20绘制一支栩栩如生的铅笔
[https_codepen.io_comehope_pen_PaZYBw]: https://codepen.io/comehope/pen/PaZYBw
[https_scrimba.com_p_pEgDAM_cEQqefK]: https://scrimba.com/p/pEgDAM/cEQqefK
[Link 2]: http://www.jqhtml.com/19315.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges
[https_segmentfault.com_a_1190000015153865]: https://segmentfault.com/a/1190000015153865