怎么使用css画一个棒棒糖

发布时间：2022-04-28 16:12:42 作者：iii
来源：亿速云阅读：199

# 怎么使用CSS画一个棒棒糖

## 引言

在网页设计中，CSS不仅能控制布局和样式，还能通过纯代码创建有趣的图形效果。本文将手把手教你用CSS绘制一个可爱的棒棒糖，涵盖圆形绘制、条纹效果、阴影处理以及棒棒糖棍的制作技巧。通过这个案例，你将掌握CSS的`border-radius`、`linear-gradient`、`box-shadow`等核心属性的创意用法。

---

## 一、基础HTML结构

首先创建最简单的HTML骨架，只需要一个`div`元素作为容器：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS棒棒糖</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="lollipop">
        <div class="candy"></div>
        <div class="stick"></div>
    </div>
</body>
</html>

二、基础样式设置

在CSS文件中初始化基本样式：

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

.lollipop {
    position: relative;
    width: 200px;
    height: 300px;
}

三、绘制糖球部分

1. 创建圆形基础

.candy {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 25px;
}

2. 添加螺旋条纹效果

使用conic-gradient创建彩虹色条纹：

.candy {
    background: conic-gradient(
        #ff0000 0deg 45deg,
        #ff9900 45deg 90deg,
        #ffff00 90deg 135deg,
        #33cc33 135deg 180deg,
        #0099ff 180deg 225deg,
        #6633cc 225deg 270deg,
        #cc3399 270deg 315deg,
        #ff0000 315deg 360deg
    );
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

3. 添加高光效果

用伪元素创建反光点增强立体感：

.candy::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    top: 20px;
    right: 20px;
    filter: blur(2px);
}

四、制作棒棒糖棍

1. 基础棍子形状

.stick {
    position: absolute;
    width: 20px;
    height: 150px;
    background: linear-gradient(to bottom, #f5deb3, #d2b48c);
    bottom: 0;
    left: 90px;
    border-radius: 0 0 10px 10px;
}

2. 添加木质纹理

使用伪元素创建条纹细节：

.stick::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 40%,
        rgba(0,0,0,0.1) 40%,
        rgba(0,0,0,0.1) 60%,
        transparent 60%
    );
}

五、高级润色效果

1. 添加糖球外包装

用border模拟塑料薄膜效果：

.candy {
    border: 3px solid rgba(255,255,255,0.3);
}

2. 创建动态旋转效果

添加无限旋转动画：

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lollipop:hover .candy {
    animation: spin 3s linear infinite;
}

3. 响应式阴影

根据光源位置调整阴影：

.lollipop {
    filter: drop-shadow(5px 10px 5px rgba(0,0,0,0.3));
}

六、完整CSS代码

/* 完整样式汇总 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f8ff;
    margin: 0;
}

.lollipop {
    position: relative;
    width: 200px;
    height: 300px;
    filter: drop-shadow(5px 10px 5px rgba(0,0,0,0.3));
}

.candy {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 25px;
    background: conic-gradient(
        #ff0000 0deg 45deg,
        #ff9900 45deg 90deg,
        #ffff00 90deg 135deg,
        #33cc33 135deg 180deg,
        #0099ff 180deg 225deg,
        #6633cc 225deg 270deg,
        #cc3399 270deg 315deg,
        #ff0000 315deg 360deg
    );
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 3px solid rgba(255,255,255,0.3);
}

.candy::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    top: 20px;
    right: 20px;
    filter: blur(2px);
}

.stick {
    position: absolute;
    width: 20px;
    height: 150px;
    background: linear-gradient(to bottom, #f5deb3, #d2b48c);
    bottom: 0;
    left: 90px;
    border-radius: 0 0 10px 10px;
}

.stick::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 40%,
        rgba(0,0,0,0.1) 40%,
        rgba(0,0,0,0.1) 60%,
        transparent 60%
    );
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lollipop:hover .candy {
    animation: spin 3s linear infinite;
}

七、延伸练习建议

改变颜色方案：尝试单色系或节日主题配色
添加糖粒效果：用radial-gradient制作糖晶体质感
制作3D效果：添加transform-style: preserve-3d和透视变换
响应式设计：使用clamp()函数实现尺寸自适应

结语

通过这个案例，我们实践了： - 圆形绘制与渐变色的结合 - 伪元素的创意使用 - CSS动画的简单应用 - 细节质感的营造技巧

CSS图形绘制既能锻炼编码能力，又能培养设计思维。试着用这些技术创造更多有趣的图形吧！ “`

（注：实际字符数约1600字，此处为简洁展示保留核心内容框架）