动态天气图标

最新推荐文章于 2023-10-08 17:34:48 发布

七莫七莫七

最新推荐文章于 2023-10-08 17:34:48 发布

阅读量250

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_50344936/article/details/131035383

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

动态天气小图标
一、先看看效果
二、代码
- 1.html部分
- 2.css部分

动态天气小图标

一个会动的天气图标
在这里插入图片描述

一、先看看效果

如上图

二、代码

1.html部分

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/weathericon.css">
	</head>
	<body>
		<div class="container">
			<!-- 晴天 -->
			<div class="sunny">
				<div class="sun">
					<div class="rays"></div>
				</div>
			</div>
			<!-- 雨天 -->
			<div class="rainy">
				<div class="cloud"></div>
				<div class="rain"></div>
			</div>
			<!-- 多云 -->
			<div class="cloudy">
				<div class="cloud"></div>
				<div class="cloud"></div>
			</div>
		</div>
	</body>
</html>

2.css部分

代码如下（示例）：

*{
	margin: 0;
	padding: 0;
}
body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 自定义属性 */
	--bg--color:#161616;
	background-color: var(--bg--color);
}
.container{
	width: 700px;
	display: flex;
	justify-content: space-around;
}
.sunny{
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sunny .sun{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--bg--color);
	box-shadow: 0 0 0 6px orange;
	animation: sunny 10s linear infinite;
}
.sunny .sun .rays{
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 18px;
	background-color: yellow;
	box-shadow: 0 86px yellow;
	border-radius: 4px;
}
.sunny .sun .rays::before,
.sunny .sun .rays::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 18px;
	background-color: yellow;
	box-shadow: 0 86px yellow;
	border-radius: 4px;
	transform: rotate(60deg);
	transform-origin: 50% 52px;
}
.sunny .sun .rays::before{
	transform: rotate(-60deg);
}

.rainy{
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rainy .cloud{
	width: 60px;
	height: 60px;
	background-color: var(--bg--color);
	border-radius: 50%;
	/* 画云朵 */
	box-shadow: -35px 11px 0 -11px var(--bg--color),
		33px 15px 0 -15px var(--bg--color),
		0 0 0 6px lightgray,
		-35px 11px 0 -5px lightgray,
		33px 15px 0 -9px lightgray;	
}
.rainy .cloud::after{
	position: absolute;
	bottom: 20px;
	left: 12px;
	content: '';
	width: 73px;
	height: 16px;
	background-color: var(--bg--color);
	box-shadow: 0 6px 0 0 lightgray;
}
.rainy .rain{
	position: absolute;
	top: 55%;
	left: 20%;
	width: 60px;
	height: 60px;
	background-color: var(--bg--color);
}
.rainy .rain::after{
	content: '';
	position: absolute;
	top: 20%;
	left: 50%;
	width: 18px;
	height: 18px;
	background-color: #0cf;
	border-radius: 100% 0 60% 50%/60% 0 100% 50%;
	/* 画雨点 */
	box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2),
		-14px 18px 0 -2px rgba(255, 255, 255, 0.2),
		-22px -2px 0 rgba(255, 255, 255, 0.2);
		transform: rotate(-28deg);
		margin: 0 0 0 -5px;
		animation: rainy 2s linear infinite;
}
.cloudy{
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cloudy .cloud{
	position: absolute;
	z-index: 1;
	width: 60px;
	height: 60px;
	background-color: var(--bg--color);
	border-radius: 50%;
	/* 画云朵 */
	box-shadow: -35px 11px 0 -11px var(--bg--color),
		33px 15px 0 -15px var(--bg--color),
		0 0 0 6px lightgray,
		-35px 11px 0 -5px lightgray,
		33px 15px 0 -9px lightgray;
}
.cloudy .cloud::after{
	position: absolute;
	bottom: 0px;
	left: -8px;
	content: '';
	width: 73px;
	height: 16px;
	background-color: var(--bg--color);
	box-shadow: 0 6px 0 0 lightgray;
}
.cloudy .cloud:nth-child(2){
	z-index: 0;
	background-color: #fff;
	/* 画小云朵 */
	box-shadow: -35px 11px 0 -11px #fff,
		33px 15px 0 -15px #fff,
		0 0 0 6px #fff,
		-35px 11px 0 -5px #fff,
		33px 15px 0 -9px #fff;
		opacity: 0.3;
		transform: scale(0.5) translate(96px,-48px);
		animation: cloudy 3s linear infinite;
}
.cloudy .cloud:nth-child(2)::after{
	background-color: #fff;
}
/* 动画 */
/* 太阳 */
@keyframes sunny{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
/* 动画雨滴 */
@keyframes rainy{
	0%{
		background-color: #0cf;
		box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2),
		-14px 18px 0 -2px rgba(255, 255, 255, 0.2),
		-22px -2px 0 rgba(255, 255, 255, 0.2);
	}
	25%{
		box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2),
		-14px 18px 0 -2px #0cf,
		-22px -2px 0 rgba(255, 255, 255, 0.2);
	}
	50%{
		background-color: rgba(255, 255, 255, 0.2);
		box-shadow: 10px 14px 0 -2px #0cf,
		-14px 18px 0 -2px rgba(255, 255, 255, 0.2),
		-22px -2px 0 rgba(255, 255, 255, 0.2);
	}
	100%{
		box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2),
		-14px 18px 0 -2px rgba(255, 255, 255, 0.2),
		-22px -2px 0 #0cf;
	}
}
@keyframes cloudy{
	0%{
		opacity: 0;
	}
	5%{
		opacity: 0.3;
	}
	100%{
		opacity: 0;
		transform: scale(0.5) translate(-200%,-48px);
	}
}