HTML&CSS：必学！手把手教你实现动态天气图标

在 Web 开发中，动态图标可以为页面增添活力与趣味。今天，就让我们一起探索如何利用 HTML 和 CSS 打造一组精美的动态天气图标，为你的项目增色不少。

演示效果

CSS 样式与动画

接下来，我们通过 CSS 为这些元素添加样式和动画效果，让图标动起来。

基础样式设置

html {
    box-sizing: border-box;
}

html *,
html *:before,
html *:after {
    box-sizing: inherit;
}

body {
    max-width: 42em;
    padding: 2em;
    margin: 0 auto;
    color: #161616;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: currentColor;
}

h1 {
    margin-bottom: 1.375em;
    color: #fff;
    font-weight: 100;
    font-size: 2em;
    text-transform: uppercase;
}复制代码

图标容器样式

.icon {
    position: relative;
    display: inline-block;
    width: 12em;
    height: 10em;
    font-size: 1em;
    margin: 1em;
}复制代码

云朵样式

.cloud {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 3.6875em;
    height: 3.6875em;
    margin: -1.84375em;
    background: currentColor;
    border-radius: 50%;
    box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}

.cloud:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.5em;
    display: block;
    width: 4.5625em;
    height: 1em;
    background: currentColor;
    box-shadow: 0 0.4375em 0 -0.0625em #fff;
}复制代码

太阳样式

.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    margin: -1.25em;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 0.375em #fff;
    animation: spin 12s infinite linear;
}

.rays {
    position: absolute;
    top: -2em;
    left: 50%;
    display: block;
    width: 0.375em;
    height: 1.125em;
    margin-left: -0.1875em;
    background: #fff;
    border-radius: 0.25em;
    box-shadow: 0 5.375em #fff;
}

.rays:before,
.rays:after {
    content: '';
    position: absolute;
    top: 0em;
    left: 0em;
    display: block;
    width: 0.375em;
    height: 1.125em;
    transform: rotate(60deg);
    transform-origin: 50% 3.25em;
    background: #fff;
    border-radius: 0.25em;
    box-shadow: 0 5.375em #fff;
}

.rays:before {
    transform: rotate(120deg);
}复制代码

雨滴样式

.rain:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1.125em;
    height: 1.125em;
    margin: -1em 0 0 -0.25em;
    background: #0cf;
    border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
    box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    transform: rotate(-28deg);
    animation: rain 3s linear infinite;
}复制代码

动画定义

/* 旋转动画 */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* 云朵动画 */
@keyframes cloud {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(-200%, -3em);
    }
}

/* 雨滴动画 */
@keyframes rain {
    0% {
        background: #0cf;
        box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
    }
    25% {
        box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
    }
}

/* 闪电动画 */
@keyframes lightning {
    45% {
        color: #fff;
        background: #fff;
        opacity: 0.2;
    }
    50% {
        color: #0cf;
        background: #0cf;
        opacity: 1;
    }
    55% {
        color: #fff;
        background: #fff;
        opacity: 0.2;
    }
}复制代码

总结

通过上述 HTML 和 CSS 代码，我们成功实现了一组生动的动态天气图标。这些图标不仅外观精美，还能通过简单的 CSS 动画实现各种天气状态的动态展示，如太阳雨、雷暴、多云、雪花、晴天和雨天等。你可以将这些图标应用到天气应用、网站天气展示模块等场景中，为用户带来更加直观和生动的体验。快动手试试吧，相信你能创作出更多精彩的动态图标！