当前位置：首页 > CSS

CSS模板制作雪糕

2026-04-02 10:28:11CSS

使用CSS绘制雪糕图形

通过CSS的border-radius、gradient和box-shadow属性可以创建一个逼真的雪糕图形。以下是一个完整的示例代码：

CSS模板制作雪糕

<!DOCTYPE html>
<html>
<head>
    <style>
        .ice-cream {
            width: 120px;
            height: 180px;
            position: relative;
            margin: 50px auto;
        }

        .cone {
            width: 60px;
            height: 90px;
            background: linear-gradient(to bottom, #f4a460, #d2691e);
            border-radius: 0 0 30px 30px;
            position: absolute;
            bottom: 0;
            left: 30px;
        }

        .scoop {
            width: 100px;
            height: 100px;
            background: linear-gradient(to bottom, #ff6b6b, #d63031);
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 10px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }

        .scoop::before {
            content: "";
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 20px;
            left: 30px;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="ice-cream">
        <div class="cone"></div>
        <div class="scoop"></div>
    </div>
</body>
</html>

添加动画效果

为雪糕添加融化动画效果：

CSS模板制作雪糕

.scoop {
    animation: melt 3s infinite alternate;
}

@keyframes melt {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0.9) scaleX(1.05);
        border-radius: 50% 50% 30% 30%;
    }
}

多色雪糕球实现

创建多个不同颜色的雪糕球层叠效果：

<style>
    .scoop-top {
        width: 90px;
        height: 90px;
        background: linear-gradient(to bottom, #fdcb6e, #e17055);
        border-radius: 50%;
        position: absolute;
        top: -30px;
        left: 15px;
        z-index: 3;
    }

    .scoop-middle {
        width: 100px;
        height: 100px;
        background: linear-gradient(to bottom, #a29bfe, #6c5ce7);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 2;
    }

    .scoop-bottom {
        width: 110px;
        height: 110px;
        background: linear-gradient(to bottom, #00b894, #008066);
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 5px;
        z-index: 1;
    }
</style>

<div class="ice-cream">
    <div class="cone"></div>
    <div class="scoop-bottom"></div>
    <div class="scoop-middle"></div>
    <div class="scoop-top"></div>
</div>

添加装饰元素

为雪糕添加糖粒和巧克力碎片装饰：

.decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
}

.sprinkle {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    position: absolute;
}

.sprinkle:nth-child(1) { top: 20px; left: 30px; }
.sprinkle:nth-child(2) { top: 30px; left: 50px; background: #fdcb6e; }
.sprinkle:nth-child(3) { top: 40px; left: 20px; background: #a29bfe; }
.sprinkle:nth-child(4) { top: 50px; left: 70px; }
.sprinkle:nth-child(5) { top: 60px; left: 40px; background: #00b894; }