这段HTML和CSS代码描述了一个动态天气图标集合的效果，通过CSS动画和样式实现了多种天气状态的动态展示。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
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;
}
p,
a {
color: rgba(255, 255, 255, 0.3);
font-size: small;
}
p {
margin: 1.375rem0;
}
.icon {
position: relative;
display: inline-block;
width: 12em;
height: 10em;
font-size: 1em;
/* control icon size here */
}
.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.1875em0.6875em0 -0.6875em,
2.0625em0.9375em0 -0.9375em,
0000.375em#fff,
-2.1875em0.6875em0 -0.3125em#fff,
2.0625em0.9375em0 -0.5625em#fff;
}
.cloud:after {
content: '';
position: absolute;
bottom: 0;
left: -0.5em;
display: block;
width: 4.5625em;
height: 1em;
background: currentColor;
box-shadow: 00.4375em0 -0.0625em#fff;
}
.cloud:nth-child(2) {
z-index: 0;
background: #fff;
box-shadow:
-2.1875em0.6875em0 -0.6875em#fff,
2.0625em0.9375em0 -0.9375em#fff,
0000.375em#fff,
-2.1875em0.6875em0 -0.3125em#fff,
2.0625em0.9375em0 -0.5625em#fff;
opacity: 0.3;
transform: scale(0.5) translate(6em, -3em);
animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after {
background: #fff;
}
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 2.5em;
height: 2.5em;
margin: -1.25em;
background: currentColor;
border-radius: 50%;
box-shadow: 0000.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: 05.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: 05.375em#fff;
}
.rays:before {
transform: rotate(120deg);
}
.cloud+.sun {
margin: -2em1em;
}
.rain,
.lightning,
.snow {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 3.75em;
height: 3.75em;
margin: 0.375em00 -2em;
background: currentColor;
}
.rain:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 1.125em;
height: 1.125em;
margin: -1em00 -0.25em;
background: #0cf;
border-radius: 100%060%50% / 60%0100%50%;
box-shadow:
0.625em0.875em0 -0.125emrgba(255, 255, 255, 0.2),
-0.875em1.125em0 -0.125emrgba(255, 255, 255, 0.2),
-1.375em -0.125em0rgba(255, 255, 255, 0.2);
transform: rotate(-28deg);
animation: rain 3s linear infinite;
}
.bolt {
position: absolute;
top: 50%;
left: 50%;
margin: -0.25em00 -0.125em;
color: #fff;
opacity: 0.3;
animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
width: 0.5em;
height: 0.25em;
margin: -1.75em00 -1.875em;
transform: translate(2.5em, 2.25em);
opacity: 0.2;
animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: -1.625em00 -1.0125em;
border-top: 1.25em solid transparent;
border-right: 0.75em solid;
border-bottom: 0.75em solid;
border-left: 0.5em solid transparent;
transform: skewX(-10deg);
}
.bolt:after {
margin: -0.25em00 -0.25em;
border-top: 0.75em solid;
border-right: 0.5em solid transparent;
border-bottom: 1.25em solid transparent;
border-left: 0.75em solid;
transform: skewX(-10deg);
}
.bolt:nth-child(2):before {
margin: -0.75em00 -0.5em;
border-top: 0.625em solid transparent;
border-right: 0.375em solid;
border-bottom: 0.375em solid;
border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after {
margin: -0.125em00 -0.125em;
border-top: 0.375em solid;
border-right: 0.25em solid transparent;
border-bottom: 0.625em solid transparent;
border-left: 0.375em solid;
}
.flake:before,
.flake:after {
content: '\2744';
position: absolute;
top: 50%;
left: 50%;
margin: -1.025em00 -1.0125em;
color: #fff;
list-height: 1em;
opacity: 0.2;
animation: spin 8s linear infinite reverse;
}
.flake:after {
margin: 0.125em00 -1em;
font-size: 1.5em;
opacity: 0.4;
animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
margin: -0.5em000.25em;
font-size: 1.25em;
opacity: 0.2;
animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
margin: 0.375em000.125em;
font-size: 2em;
opacity: 0.4;
animation: spin 16s linear infinite reverse;
}
/* Animations */
@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.625em0.875em0 -0.125emrgba(255, 255, 255, 0.2),
-0.875em1.125em0 -0.125emrgba(255, 255, 255, 0.2),
-1.375em -0.125em0#0cf;
}
25% {
box-shadow:
0.625em0.875em0 -0.125emrgba(255, 255, 255, 0.2),
-0.875em1.125em0 -0.125em#0cf,
-1.375em -0.125em0rgba(255, 255, 255, 0.2);
}
50% {
background: rgba(255, 255, 255, 0.3);
box-shadow:
0.625em0.875em0 -0.125em#0cf,
-0.875em1.125em0 -0.125emrgba(255, 255, 255, 0.2),
-1.375em -0.125em0rgba(255, 255, 255, 0.2);
}
100% {
box-shadow:
0.625em0.875em0 -0.125emrgba(255, 255, 255, 0.2),
-0.875em1.125em0 -0.125emrgba(255, 255, 255, 0.2),
-1.375em -0.125em0#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;
}
}
</style>
</head>
<body>
<h1>动态天气图标</h1>
<div class="icon sun-shower">
<div class="cloud"></div>
<div class="sun">
<div class="rays"></div>
</div>
<div class="rain"></div>
</div>
<div class="icon thunder-storm">
<div class="cloud"></div>
<div class="lightning">
<div class="bolt"></div>
<div class="bolt"></div>
</div>
</div>
<div class="icon cloudy">
<div class="cloud"></div>
<div class="cloud"></div>
</div>
<div class="icon flurries">
<div class="cloud"></div>
<div class="snow">
<div class="flake"></div>
<div class="flake"></div>
</div>
</div>
<div class="icon sunny">
<div class="sun">
<div class="rays"></div>
</div>
</div>
<div class="icon rainy">
<div class="cloud"></div>
<div class="rain"></div>
</div>
</body>
</html>
HTML 结构
h1：页面标题，显示页面的主题内容。 icon sun-shower：定义一个动态天气图标，表示“太阳雨”天气，包含云、太阳和雨的组合元素。 cloud：表示云的图形元素，通过CSS实现云的形状和动态效果。 sun：表示太阳的图形元素，通过CSS实现太阳的形状和动态效果。 rain：表示雨的图形元素，通过CSS实现雨的动态效果。 lightning：表示闪电的图形元素，通过CSS实现闪电的闪烁效果。 bolt：表示闪电的分支元素，通过CSS实现闪电分支的形状和动态效果。 flake：表示雪花的图形元素，通过CSS实现雪花的动态效果。 snow：表示雪花的容器元素，通过CSS实现雪花的整体动态效果。 sunny：定义一个表示“晴天”的动态天气图标。 rainy：定义一个表示“雨天”的动态天气图标。
CSS 样式
.icon：定义动态天气图标的容器样式，设置图标的宽度、高度和字体大小，控制图标的大小和布局。 .cloud：定义云的样式，设置云的形状（圆形）、阴影、位置和动画，实现云的动态效果（如移动和透明度变化）。 .sun：定义太阳的样式，设置太阳的形状（圆形）、阴影和动画，实现太阳的旋转效果。 .rays：定义太阳光线的样式，设置太阳光线的形状、阴影和动画，实现光线的动态效果。 .rain：定义雨的样式，设置雨的形状、阴影和动画，实现雨滴的动态效果。 .lightning：定义闪电的样式，设置闪电的形状、颜色和动画，实现闪电的闪烁效果。 .bolt：定义闪电分支的样式，设置闪电分支的形状、颜色和动画，实现闪电分支的动态效果。 .flake：定义雪花的样式，设置雪花的形状、颜色和动画，实现雪花的旋转和动态效果。 .snow：定义雪花的容器样式，用于包含雪花元素，通过CSS样式和动画实现雪花的整体动态效果。 @keyframes spin：定义旋转动画，用于实现太阳光线、雪花等元素的旋转效果。 @keyframes cloud：定义云的动画，实现云的移动和透明度变化效果。 @keyframes rain：定义雨的动画，实现雨滴的动态效果。 @keyframes lightning：定义闪电的动画，实现闪电的闪烁效果。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
