纯HTML5+CSS3制作生日蛋糕代码-前端开发

当制作生日蛋糕网页时，我们需要使用HTML5和CSS3的特性来实现。下面是一个完整的攻略：

当制作生日蛋糕网页时，我们需要使用HTML5和CSS3的特性来实现。下面是一个完整的攻略：

1.准备工作

首先创建一个HTML文件，并将其保存为index.html。
在HTML文件头部，添加meta标签并设置编码方式为UTF-8。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生日蛋糕</title>
</head>
<body>

</body>
</html>

2.创建页面结构

在body标签中添加一个div元素，并给它设置一个类名（class）为cake。

<body>
    <div class="cake">

    </div>
</body>

在cake元素中添加两个子元素，一个是表示蛋糕底部的div元素，一个是表示蛋糕顶部的div元素，并分别设置自己的类名。

<div class="cake">
    <div class="bottom"></div>
    <div class="top"></div>
</div>

3.样式设计

首先设置整个网页的背景色为淡粉色，将html和body的margin值设为0。

html, body {
    margin: 0;
    background-color: #fee2e2;
}

接着，设置蛋糕的尺寸、颜色、形状。

.cake {
    height: 550px;
    width: 400px;
    background-color: #f3d3d3;
    border-radius: 50% / 30% 30% 70% 70%;
    position: relative;
    margin: 50px auto;
}

然后是蛋糕底部的设计，它的颜色为淡黄色，高度为90px，border-radius设为70px，制造出一个圆形的效果。

.bottom {
    height: 90px;
    background-color: #ffd477;
    border-radius: 70px;
    margin: 480px auto 0 auto;
}

接下来，我们将来制作糖霜，将它放在蛋糕上表明蛋糕的甜度。这里我们使用了CSS3的特性 - 渐变（Gradient）来实现。

.top {
    background: linear-gradient(45deg, #fceef5 0%, #fff1e6 100%);
    height: 80px;
    width: 140px;
    margin: -55px auto 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

为了让这个蛋糕更加生动，我们再添加蜡烛，用小圆圈来代表。

.top:before {
    content: '';
    background-color: #ffc107;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    left: 70%;
    z-index: 1;
}

4.网页效果制作

创建蜡烛火焰的动画。这里我们使用了CSS3的特性 – 动画（Animation）。

.top:before {
    animation: candle 2s infinite linear alternate;
}

@keyframes candle {
    0% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(-2px);
    }
}

最后，我们可以添加一些文字来表达祝福。

<div class="cake">
    <div class="bottom"></div>
    <div class="top">
        <span>Happy Birthday!</span>
    </div>
</div>

.top span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #333;
}

现在,你已经学会了使用HTML5和CSS3来制作一个简单的生日蛋糕网页。下面我们来看一下两个实例：

示例1

下面的代码中我们添加了一些装饰，比如彩带和贴花。

<div class="cake">
    <div class="bottom"></div>
    <div class="top">
        <div class="ribbon red"></div>
        <div class="ribbon yellow"></div>
        <span>Happy Birthday!</span>
        <div class="sticker">
            <div class="heart"></div>
            <div class="heart"></div>
            <div class="star"></div>
            <div class="star"></div>
        </div>
    </div>
</div>

.top {
    background: linear-gradient(45deg, #fceef5 0%, #fff1e6 100%);
    height: 80px;
    width: 140px;
    margin: -55px auto 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ribbon {
    position: absolute;
    height: 20px;
    width: 80px;
    background-color: #e74c3c;
    top: -30px;
}

.red {
    transform: rotate(-45deg);
    background-color: #e74c3c;
    left: calc(50% - 60px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.yellow {
    transform: rotate(45deg);
    background-color: #f1c40f;
    left: calc(50% - 20px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.sticker {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.heart {
    background-color: #f44336;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 8px;
    transform: rotate(-45deg);
    border-radius: 50% 50% 0 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

.heart:last-child {
    left: 22px;
}

.star {
    background-color: #ff9800;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
}

.star:last-child {
    left: 18px;
}

示例2

下面的代码中我们添加了一些闪粉的效果，用CSS3的伪元素和动画制成。

<div class="cake">
    <div class="bottom"></div>
    <div class="top">
        <span>Happy Birthday!</span>
        <div class="shine"></div>
    </div>
</div>

.cake {
    background-color: #f3d3d3;
    border-radius: 50%;
    position: relative;
    margin: 50px auto;
    animation: shake 1s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.top {
    background: linear-gradient(45deg, #fceef5 0%, #fff1e6 100%);
    height: 80px;
    width: 140px;
    margin: -55px auto 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: shine 2s ease-in-out infinite;
}

.top span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #333;
    animation: shake 1s ease-in-out infinite;
}

.shine:before,
.shine:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0);
    animation: shine 2s ease-in-out infinite;
}

.shine:before {
    animation-delay: 0s;
}

.shine:after {
    animation-delay: 1s;
}

@keyframes shine {
    0% {
        transform: rotate(0);
        background: rgba(255, 255, 255, 0);
    }
    20% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        transform: rotate(180deg);
        background: rgba(255, 255, 255, 0);
    }
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-20deg);
    }
    20% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-20deg);
    }
    40% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

以上就是制作生日蛋糕网页的完整攻略和两个示例，希望对你有所帮助。

1.准备工作

2.创建页面结构

3.样式设计

4.网页效果制作

示例1

示例2

基础教程推荐