创建动画天气卡片

HTML, CSS 和 JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
<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-container">
        <div class="weather-card" id="sunny">
            <div class="sun"></div>
        </div>
        <div class="weather-card" id="rainy">
            <div class="rain"></div>
        </div>
        <div class="weather-card" id="snowy">
            <div class="snow"></div>
        </div>
        <div class="weather-card" id="windy">
            <div class="wind"></div>
        </div>
    </div>
    <button onclick="changeWeather('sunny')">晴天</button>
    <button onclick="changeWeather('rainy')">降雨</button>
    <button onclick="changeWeather('snowy')">下雪</button>
    <button onclick="changeWeather('windy')">风力</button>
    <script src="script.js"></script>
</body>
</html>

CSS

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

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

.weather-card {
    width: 150px;
    height: 150px;
    background-color: #555;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.sun {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-color: yellow;
    border-radius: 50%;
    box-shadow: 0 0 20px yellow;
    animation: rotate 2s linear infinite;
}

.rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #0000, #0000 10px, #555 10px, #555 20px);
    animation: rain 1s linear infinite;
}

.snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #fff 10%, transparent 10%);
    background-size: 20px 20px;
    animation: snow 3s linear infinite;
}

.wind {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2))
    repeat scroll 0 0;
    animation: wind 2s linear infinite;
}

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

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

@keyframes snow {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

@keyframes wind {
    0% { background-position: 0 0; }
    100% { background-position: 200px 0; }
}

JavaScript

function changeWeather(weather) {
    document.querySelectorAll('.weather-card').forEach(card => {
        card.style.display = 'none';
    });
    document.getElementById(weather).style.display = 'block';
}

这个示例代码创建了一个简单的动画天气卡片，可以通过按钮切换不同的天气状态。每个天气状态都有相应的动画效果，如晴天时的旋转太阳、降雨时的雨滴效果等。所有代码都包含在一个HTML文件中，便于部署和使用。

标签: none

评论已关闭