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 动画实现各种天气状态的动态展示，如太阳雨、雷暴、多云、雪花、晴天和雨天等。你可以将这些图标应用到天气应用、网站天气展示模块等场景中，为用户带来更加直观和生动的体验。快动手试试吧，相信你能创作出更多精彩的动态图标！