乱云压顶千钧重，仍向星河寄远帆

他们叫我秃子
130 阅读5分钟

生日快乐

最近又到了年终的时段了，但是今天我不写总结，我给我自己送了一个炫酷的网页，犒劳一下辛苦了一年的自己。不过我还是得捞一下一年的辛苦，很短的。说完就直接上干货了。首先今年的第一件事就是搞钱买房，也是如愿的买到了自己心仪的房子，过程很辛苦，同时也要感谢很多人的支持和帮助。这里要说到我嫂子了，看房到买房全程指导，后面到了装修搞卫生也是全程帮忙的。后面第二件事，没有第二件事了。我今年就只做了一件事，一大半都还是别人帮忙完成的。还有一整年都在还贷款，贷款把我压死。苟延残喘的顶过了这一年。当然，我还是很抱有希望的，我觉得我的未来会很好，因为我都是在向自己的目标努力着，尽管总是被生活逼着走。但我依然相信生活。

下面来上干货

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>生日快乐</title>
</head>

<body>
    <div class="confetti-container"></div>
    <div class="balloon-container"></div>
    <!-- 多层生日蛋糕动画元素 -->
    <div id="birthday-cake-multi-layer">
        <div class="cake-layer top-layer" data-layer="3"></div>
        <div class="cake-layer middle-layer" data-layer="2"></div>
        <div class="cake-layer bottom-layer" data-layer="1"></div>
    </div>
    <div class="message">
        <h1>生日快乐！</h1>
        <p>愿这一天充满欢笑与惊喜，新的一岁里所有愿望都能实现！</p>
    </div>
    <div class="fireworks-container"></div>
    <div class="sparkle-container"></div>
    <script src="script.js"></script>
</body>

</html>

body {
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.balloon-container {
    position: relative;
    width: 100%;
    height: 30%;
    overflow: hidden;
}

.balloon {
    position: absolute;
    border-radius: 50%;
    animation: float-up 10s linear infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.balloon:hover {
    transform: scale(1.2);
}
#birthday-cake-multi-layer {
    width: 200px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

/* 每层蛋糕的通用样式 */
.cake-layer {
    background-color: #f5f5f5;
    border-radius: 20px 20px 0 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: cakeLayerAnimation 2s ease-in-out infinite;
}

/* 底层蛋糕样式（最大的一层） */
.cake-layer.bottom-layer {
    width: 160px;
    height: 100px;
    bottom: 0;
    /*background-color: #fdf0d5;*/
    background: linear-gradient(to top, #fdf0d5, #ffe5b4);
}

/* 中层蛋糕样式 */
.cake-layer.middle-layer {
    width: 140px;
    height: 80px;
    bottom: 10px;
    /*background-color: #ffd1dc;*/
    background: linear-gradient(to top, #ffd1dc, #ffa0c0); 
}

/* 上层蛋糕样式（最小的一层） */
.cake-layer.top-layer {
    width: 120px;
    height: 60px;
    bottom: 20px;
    /*background-color: #fdf0d5;*/
    background: linear-gradient(to top, #fdf0d5, #ffe5b4);
}

/* 蛋糕上的蜡烛样式 */
.cake-candle {
    width: 10px;
    height: 30px;
    /*background-color: #ff0000;*/
    background: linear-gradient(to top, #ff0000, #ff6600);
    border-radius: 5px 5px 0 0;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    animation: candleAnimation 2s ease-in-out infinite;
}

/* 蜡烛火焰样式 */
.cake-candle::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #ff9900;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: -2.5px;
    box-shadow: 0 0 10px 5px #ff9900;
    animation: flameAnimation 0.5s ease-in-out infinite alternate;
}
.message {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
    animation: neon-glow 3s ease-in-out infinite;
}

.message h1 {
    color: #ff6600;
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600;
    animation: wave 3s ease-in-out infinite;
}

.message p {
    color: #333;
    font-size: 1.2em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.confetti {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #ff6600;
    animation: confetti-fall 5s linear infinite;
    transform-origin: top center;
}

.confetti:nth-child(2n) {
    background-color: #00ff00;
}

.confetti:nth-child(3n) {
    background-color: #0000ff;
}

.confetti-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fireworks {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff6600;
    animation: twinkle 1s ease-in-out infinite;
    opacity: 0;
    box-shadow: 0 0 5px #ff6600;
}

.fireworks-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: #ffff00;
    animation: sparkle-move 2s ease-in-out infinite;
    box-shadow: 0 0 3px #ffff00;
}

.sparkle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@keyframes float-up {
    from {
        bottom: 0;
        transform: translateY(0) rotate(0deg);
    }

    to {
        bottom: 100vh;
        transform: translateY(-100%) rotate(360deg);
    }
}
@keyframes cakeLayerAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes candleAnimation {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes flameAnimation {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}
@keyframes sparkle-move {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(0, 0);
    }
}
@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
    }
}

@keyframes twinkle {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

@keyframes neon-glow {
    0%,
    100% {
        text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600, 0 0 40px #ff6600, 0 0 50px #ff6600,
            0 0 60px #ff6600, 0 0 70px #ff6600;
    }

    50% {
        text-shadow: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 15px #ff6600;
    }
}

@keyframes wave {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}

// 获取多层蛋糕的元素容器
const cakeMultiLayer = document.getElementById('birthday-cake-multi-layer');

// 创建并添加蜡烛到蛋糕最上层
const candle = document.createElement('div');
candle.classList.add('cake-candle');
const topLayer = cakeMultiLayer.querySelector('.cake-layer.top-layer');
topLayer.appendChild(candle)
	const balloonColors = ['red', 'blue', 'green', 'yellow', 'purple', 'pink'];
const balloonContainer = document.querySelector('.balloon-container');
const confettiContainer = document.querySelector('.confetti-container');
const fireworksContainer = document.querySelector('.fireworks-container');
const sparkleContainer = document.querySelector('.sparkle-container');

function createBalloon() {
    const balloon = document.createElement('div');
    balloon.classList.add('balloon');
    const size = Math.random() * 30 + 10;
    balloon.style.width = size + 'px';
    balloon.style.height = size + 'px';
    const colorIndex = Math.floor(Math.random() * balloonColors.length);
    balloon.style.backgroundColor = balloonColors[colorIndex];
    const startX = Math.random() * window.innerWidth;
    balloon.style.left = startX + 'px';
    const startY = Math.random() * (window.innerHeight * 0.4);
    balloon.style.bottom = startY + 'px';
    balloon.style.animationDuration = Math.random() * 8 + 6 +'s';
    balloonContainer.appendChild(balloon);
}

function createConfetti() {
    const confetti = document.createElement('div');
    confetti.classList.add('confetti');
    const startX = Math.random() * window.innerWidth;
    confetti.style.left = startX + 'px';
    const rotation = Math.random() * 360;
    confetti.style.transform = `rotate(${rotation}deg)`;
    confetti.style.animationDuration = Math.random() * 3 + 2 +'s';
    confettiContainer.appendChild(confetti);
}

function createFireworks() {
    const fireworks = document.createElement('div');
    fireworks.classList.add('fireworks');
    const startX = Math.random() * window.innerWidth;
    const startY = Math.random() * window.innerHeight;
    fireworks.style.left = startX + 'px';
    fireworks.style.top = startY + 'px';
    const delay = Math.random() * 5;
    fireworks.style.animationDelay = delay +'s';
    fireworks.style.opacity = 1;
    fireworksContainer.appendChild(fireworks);
    setTimeout(() => {
        fireworks.style.opacity = 0;
    }, (delay + 1) * 1000);
}

function createSparkle() {
    const sparkle = document.createElement('div');
    sparkle.classList.add('sparkle');
    const startX = Math.random() * window.innerWidth;
    const startY = Math.random() * window.innerHeight;
    sparkle.style.left = startX + 'px';
    sparkle.style.top = startY + 'px';
    const animationDuration = Math.random() * 1 + 1;
    sparkle.style.animationDuration = animationDuration +'s';
    sparkleContainer.appendChild(sparkle);
}

for (let i = 0; i < 50; i++) {
    createBalloon();
}

for (let i = 0; i < 200; i++) {
    createConfetti();
}

setInterval(createFireworks, 1500);

setInterval(createSparkle, 50);

总结

最后最后，祝我生日快乐。可能很多人会像我一样，一路走路磕磕绊绊。但我让希望你们能和我一样: 乱云压顶千钧重，仍向星河寄远帆

avatar
文章
阅读
粉丝