创建动画天气卡片

HTML, CSS 和 JavaScript

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画天气卡片</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="weather-cards">
        <div class="card" id="sunny">
            <div class="sun"></div>
            <h2>晴天</h2>
        </div>
        <div class="card" id="rainy">
            <div class="rain"></div>
            <h2>降雨</h2>
        </div>
        <div class="card" id="snowy">
            <div class="snow"></div>
            <h2>下雪</h2>
        </div>
        <div class="card" id="windy">
            <div class="wind"></div>
            <h2>风力</h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.weather-cards {
    display: flex;
    gap: 20px;
}

.card {
    background-color: #444;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 200px;
    position: relative;
    overflow: hidden;
}

.card h2 {
    position: relative;
    z-index: 2;
}

/* 晴天样式 */
#sunny .sun {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 50%;
    box-shadow: 0 0 20px yellow;
    animation: rotate 3s infinite linear;
}

/* 降雨样式 */
#rainy .rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 255, 0.2) 0%,
        rgba(0, 0, 255, 0.2) 20%,
        transparent 20%,
        transparent 40%
    );
    animation: rain 2s infinite linear;
}

/* 下雪样式 */
#snowy .snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
    animation: snow 5s infinite linear;
}

/* 风力样式 */
#windy .wind {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: wind 3s infinite linear;
}

@keyframes rotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes rain {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}

@keyframes snow {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

@keyframes wind {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

JavaScript

// 切换天气状态
function changeWeather(weather) {
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.style.display = 'none';
    });
    document.getElementById(weather).style.display = 'block';
}

// 初始化默认天气
window.onload = function() {
    changeWeather('sunny');
};

这个示例创建了一个简单的动画天气卡片，包括晴天、降雨、下雪和风力四种状态。每种天气都有对应的动画效果，通过JavaScript函数切换不同的天气状态。您可以根据需要进一步扩展和优化这个示例。

标签: none

评论已关闭