使用CSS绘制棒棒糖可以通过HTML构建基础结构，再配合CSS的样式属性、伪元素和变形属性实现，整个过程不需要依赖任何图片资源，仅用代码就能完成效果。
基础HTML结构搭建
首先需要准备一个最基础的HTML结构，用来承载棒棒糖的各个部分，整个结构只需要一个外层容器即可，内部的糖体和棒子通过伪元素来生成，减少多余的HTML标签。
<div class="lollipop"></div>
基础样式绘制
糖体部分实现
糖体是棒棒糖的圆形部分，我们可以通过容器的::before伪元素来实现，设置宽高相等形成圆形，再添加径向渐变让糖体更有质感。
.lollipop {
position: relative;
width: 200px;
height: 300px;
margin: 50px auto;
}
.lollipop::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
border-radius: 50%;
/* 径向渐变模拟糖体的光泽感 */
background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a24);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
棒子部分实现
棒子部分使用::after伪元素实现，设置为长条形矩形，定位在糖体的正下方，和糖体形成完整的棒棒糖结构。
.lollipop::after {
content: "";
position: absolute;
top: 140px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 160px;
background-color: #f7d794;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
添加装饰花纹
为了让棒棒糖更逼真，我们可以给糖体添加螺旋状的花纹，这里通过给糖体伪元素添加多个线性渐变的背景来实现。
.lollipop::before {
/* 原有样式保留 */
background:
radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a24),
repeating-conic-gradient(
from 0deg,
transparent 0deg 15deg,
#fff 15deg 30deg
);
background-blend-mode: overlay;
}
添加旋转动画
我们可以给棒棒糖添加缓慢旋转的动画效果，让整个图形更有动态感，使用@keyframes定义旋转动画，再绑定到糖体伪元素上。
@keyframes rotateSugar {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
.lollipop::before {
/* 原有样式保留 */
animation: rotateSugar 8s linear infinite;
transform-origin: center center;
}
完整代码整合
将上面的所有代码整合起来，就能得到一个完整的可旋转带花纹的棒棒糖效果，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS绘制棒棒糖</title>
<style>
.lollipop {
position: relative;
width: 200px;
height: 300px;
margin: 50px auto;
}
.lollipop::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a24),
repeating-conic-gradient(
from 0deg,
transparent 0deg 15deg,
#fff 15deg 30deg
);
background-blend-mode: overlay;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
animation: rotateSugar 8s linear infinite;
transform-origin: center center;
}
.lollipop::after {
content: "";
position: absolute;
top: 140px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 160px;
background-color: #f7d794;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes rotateSugar {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="lollipop"></div>
</body>
</html>
核心知识点总结
整个绘制过程用到的核心CSS知识点包括：
::before和::after伪元素的使用，减少额外HTML标签border-radius属性实现圆形和圆角效果transform的translateX和rotate实现元素定位和旋转- 渐变背景
radial-gradient和repeating-conic-gradient实现图形质感 @keyframes定义动画并绑定到元素上
掌握这些知识点后，还可以尝试调整颜色、尺寸、动画参数，绘制出不同样式的棒棒糖，也可以将思路迁移到其他卡通图形的CSS绘制中。