HTML&CSS ：哇塞！铅笔罐

这段代码创建了一个铅笔罐效果，通过CSS技术实现了铅笔的旋转和阴影效果，为页面添加了视觉吸引力和立体感。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            align-items: center;
            display: flex;
            justify-content: center;
            margin: 0;
            overflow: hidden;
        }

        body .jar {
            height: 40vmin;
            width: 45vmin;
            align-items: center;
            background: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: red;
            border-radius: 15%;
            background: #d8e7e6;
            position: relative;
            margin-top: 20%;
            box-shadow: inset 20px 0px 30px #d8e7e6, inset 25px 0px 10px #eef4f4;
        }

        body .jar:before,
        body .jar:after {
            content: '';
            position: absolute;
            height: 4vmin;
            width: 70%;
            background: red;
            top: -7vmin;
            left: 15%;
            border-radius: 100%;
            background: linear-gradient(to bottom, #d8e7e6, #c8d8d7);
        }

        body .jar:after {
            background: #d8e7e6;
            height: 10vmin;
            width: 70%;
            top: -5vmin;
            border-radius: 0px 0px 100% 100%;
            z-index: -1;
            box-shadow: inset 0px -10px 0px #d8e7e6, inset 20px 0px 30px #d8e7e6, inset 25px 0px 10px #eef4f4;
        }

        body .jar .pencil {
            position: absolute;
            height: 55vmin;
            width: 2vmin;
            background: #ffc408;
            border-radius: 0 0 100% 100% / 0 0 3% 3%;
            box-shadow: 0.75vmin 0 0 #e6b007, -0.75vmin 0 0 #e6b007;
            top: -25vmin;
            transform: rotate(-10deg);
        }

        body .jar .pencil:nth-of-type(2) {
            transform: rotate(-15deg) translateX(-5vmin);
            filter: brightness(0.8);
            top: -26.5vmin;
        }

        body .jar .pencil:nth-of-type(3) {
            transform: rotate(15deg) translateX(4vmin);
            filter: brightness(0.9);
            top: -26.5vmin;
        }

        body .jar .pencil .eraser {
            position: absolute;
            width: calc(100% + 1.5vmin);
            left: -0.75vmin;
            border-radius: 0px 0px 100% 100% / 0px 0px 50% 50%;
            height: 5vmin;
            background: #f5b4b8;
            box-shadow: inset 0px 15px 0px #f5b4b8, inset 0px -5px 4px #f3f1d6, inset 0px -8px 4px #f3f1d6, inset 0px -14px 5px #f3f1d6, inset 0px -19px 0px #f3f1d6, 0px 1px 1px 0px #f3f1d6, 0px 10px 0px 0px #f3f1d6;
        }

        body .jar .pencil .eraser:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1.5vmin;
            top: -1vmin;
            background: #f5b4b8;
            box-shadow: 0px 0px 0px 0.5px #f5b4b8;
            border-radius: 100%;
        }

        body .jar .pencil:after,
        body .jar .pencil:before {
            content: '';
            position: absolute;
            bottom: -5.5vmin;
            width: 0;
            height: 0;
            left: 50%;
            transform: translateX(-50%);
            border-style: solid;
            border-width: 6vmin 1.75vmin 0 1.75vmin;
            border-color: #f3f1d6 transparent transparent transparent;
        }

        body .jar .pencil:after {
            border-width: 3vmin 0.75vmin 0 0.75vmin;
            border-color: #333 transparent transparent transparent;
        }

        body .jar .inner {
            position: absolute;
            background: #d8e7e6;
            width: 50%;
            height: 104%;
            top: -5.5%;
            z-index: 2;
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <div class='jar'>
        <div class='inner'></div>
        <div class='pencil'>
            <div class='eraser'></div>
        </div>
        <div class='pencil'>
            <div class='eraser'></div>
        </div>
        <div class='pencil'>
            <div class='eraser'></div>
        </div>
    </div>

</body>

</html>

HTML 结构

jar: 创建一个类名为"jar"的div元素，用于包含铅笔罐的各个部分。
inner: 创建一个类名为"inner"的div元素，用于显示铅笔罐的内部阴影效果。
三个 pencil: 每个div代表一支铅笔，包含一个eraser元素表示橡皮擦。

CSS 样式

body: 设置页面的高度、宽度、显示方式、对齐方式、边距和溢出隐藏。
.jar: 设置铅笔罐的样式，包括高度、宽度、对齐方式、背景色、圆角、位置、阴影和内部阴影。
.jar:before, .jar:after: 设置铅笔罐的伪元素，用于创建顶部和底部的装饰效果。
.jar .pencil: 设置铅笔的样式，包括位置、高度、宽度、背景色、圆角和阴影。
.jar .pencil:nth-of-type(n): 设置每支铅笔的特定样式，包括旋转角度、位置和亮度。
.jar .pencil .eraser: 设置橡皮擦的样式，包括位置、尺寸、背景色和阴影。
.jar .pencil .eraser:before: 设置橡皮擦的伪元素，用于创建顶部的装饰效果。
.jar .pencil:after, .jar .pencil:before: 设置铅笔的伪元素，用于创建底部的装饰效果。
.jar .inner: 设置铅笔罐内部阴影的样式，包括位置、背景色、尺寸和透明度。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！