动态天气图标

最新推荐文章于 2025-04-02 16:51:23 发布

七莫七莫七

最新推荐文章于 2025-04-02 16:51:23 发布

阅读量510

点赞数

文章标签： 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