这段HTML和CSS代码描述了一个动态天气图标集合的效果，通过CSS动画和样式实现了多种天气状态的动态展示。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html
<!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.375rem 0;
}
.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.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;
}
.cloud:nth-child(2) {
z-index: 0;
background: #fff;
box-shadow:
-2.1875em 0.6875em 0 -0.6875em #fff,
2.0625em 0.9375em 0 -0.9375em #fff,
0 0 0 0.375em #fff,
-2.1875em 0.6875em 0 -0.3125em #fff,
2.0625em 0.9375em 0 -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: 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);
}
.cloud+.sun {
margin: -2em 1em;
}
.rain,
.lightning,
.snow {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 3.75em;
height: 3.75em;
margin: 0.375em 0 0 -2em;
background: currentColor;
}
.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;
}
.bolt {
position: absolute;
top: 50%;
left: 50%;
margin: -0.25em 0 0 -0.125em;
color: #fff;
opacity: 0.3;
animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
width: 0.5em;
height: 0.25em;
margin: -1.75em 0 0 -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.625em 0 0 -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.25em 0 0 -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.75em 0 0 -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.125em 0 0 -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.025em 0 0 -1.0125em;
color: #fff;
list-height: 1em;
opacity: 0.2;
animation: spin 8s linear infinite reverse;
}
.flake:after {
margin: 0.125em 0 0 -1em;
font-size: 1.5em;
opacity: 0.4;
animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
margin: -0.5em 0 0 0.25em;
font-size: 1.25em;
opacity: 0.2;
animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
margin: 0.375em 0 0 0.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.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;
}
}
</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：定义闪电的动画，实现闪电的闪烁效果。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！