领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

测试谷歌VS Code AI 编程插件 Gemini Code Assist

nixiaole 2025-09-18 06:18:10 知识剖析 3 ℃

用 Claude Sonnet 3.7 的天气测试编码，让谷歌VS Code AI 编程插件 Gemini Code Assist 自动编程。

生成的文件在浏览器中的效果如下：（附源代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Weather Cards</title>
    <style>
        body {
            background-color: #2c3e50; /* Dark background */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .weather-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .weather-card {
            width: 150px;
            height: 200px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin: 10px;

        }
        .weather-card.sun {
            background: radial-gradient(circle, rgba(255,223,0,1) 0%, rgba(255,153,0,1) 100%);
        }
        .weather-card.rain {
            background: linear-gradient(to bottom, #00c6ff, #0072ff);
        }
        .weather-card.snow {
            background: linear-gradient(to bottom, #e0eafc, #cfdef3);
        }
        .weather-card.wind {
            background: linear-gradient(to bottom, #bdc3c7, #2c3e50);
        }

        /* Sun Animation */
        .sun-rays {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
            position: absolute;
            animation: rotate 5s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Rain Animation */
        .raindrop {
            width: 5px;
            height: 15px;
            background: #fff;
            position: absolute;
            bottom: 100%;
            animation: fall 1s linear infinite;
        }

        @keyframes fall {
            0% { bottom: 100%; }
            100% { bottom: 0; }
        }

        /* Snow Animation */
        .snowflake {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: -10px;
            animation: snow 3s linear infinite;
        }

        @keyframes snow {
            0% { top: -10px; }
            100% { top: 100%; }
        }

        /* Wind Animation */
        .wind-line {
            width: 100px;
            height: 2px;
            background: #fff;
            position: absolute;
            left: -100px;
            animation: blow 2s linear infinite;
        }

        @keyframes blow {
            0% { left: -100px; }
            100% { left: 100%; }
        }
        .button-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .button-container button {
          padding: 10px 20px;
          background-color: #3498db;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
        }

        .button-container button:hover {
          background-color: #2980b9;
        }
        .label {
            position: absolute;
            bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button onclick="switchWeather('sun')">Sun</button>
        <button onclick="switchWeather('rain')">Rain</button>
        <button onclick="switchWeather('snow')">Snow</button>
        <button onclick="switchWeather('wind')">Wind</button>
        <button onclick="showAll()">Show All</button>
    </div>
    <div class="weather-container">
        <div class="weather-card sun">
            <div class="sun-rays"></div>
            <div class="label">Sun</div>
        </div>
        <div class="weather-card rain">
            <div class="raindrop" style="left: 20%; animation-delay: 0s;"></div>
            <div class="raindrop" style="left: 50%; animation-delay: 0.2s;"></div>
            <div class="raindrop" style="left: 80%; animation-delay: 0.4s;"></div>
            <div class="label">Rain</div>
        </div>
        <div class="weather-card snow">
            <div class="snowflake" style="left: 20%; animation-delay: 0s;"></div>
            <div class="snowflake" style="left: 50%; animation-delay: 1s;"></div>
            <div class="snowflake" style="left: 80%; animation-delay: 2s;"></div>
            <div class="label">Snow</div>
        </div>
        <div class="weather-card wind">
            <div class="wind-line" style="top: 30%; animation-delay: 0s;"></div>
            <div class="wind-line" style="top: 50%; animation-delay: 1s;"></div>
            <div class="wind-line" style="top: 70%; animation-delay: 2s;"></div>
            <div class="label">Wind</div>
        </div>
    </div>

    <script>
        function switchWeather(condition) {
            const cards = document.querySelectorAll('.weather-card');
            cards.forEach(card => {
                if(card.classList.contains(condition)) {
                    card.style.display = 'flex';
                }else{
                  card.style.display = 'none';
                }
            });
        }
        function showAll(){
          const cards = document.querySelectorAll('.weather-card');
          cards.forEach(card => {
              card.style.display = 'flex';
          });
        }

        showAll();
    </script>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表