前端html+css实现动态生日快乐代码

最新推荐文章于 2024-09-07 21:50:05 发布

DDOS防御

最新推荐文章于 2024-09-07 21:50:05 发布

阅读量497

点赞数

分类专栏：网络技术文章标签：前端 html css

原文链接：https://www.yunjiasu.cc

版权

网络技术专栏收录该内容

141 篇文章 1 订阅

订阅专栏

创建一个简单的HTML和CSS动画来庆祝生日是一个有趣的前端练习。下面是一个基础示例，展示如何使用HTML和CSS来制作一个动态的“生日快乐”动画效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生日快乐动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="birthday-container">
        <h1 class="birthday-message">生日快乐</h1>
        <div class="cake">
            <div class="candles">
                <div class="flame"></div>
                <div class="flame"></div>
                <div class="flame"></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS样式

/* styles.css */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0e68c; /* 温馨的背景色 */
    overflow: hidden;
}

.birthday-container {
    text-align: center;
}

.birthday-message {
    font-size: 3em;
    color: #ffa07a; /* 漂亮的字体颜色 */
    margin-bottom: 20px;
    animation: blinkText 2s infinite;
}

.cake {
    width: 150px;
    height: 100px;
    background-color: #fdd;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.candles {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: -10px;
}

.flame {
    width: 15px;
    height: 15px;
    background-color: #ff6347; /* 火焰的颜色 */
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 100, 71, 0.7);
    animation: flame 2s infinite;
}

@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

@keyframes flame {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}