前言
本文讲解用HTML+css制作一个动态的天气图标，如果觉得对你有帮助请关注小编，你的支持就是我更新的动力！
成品展示：
本程序是一个动态的
一、HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css实现简约的天气图标动画特效</title>
<link rel="stylesheet" href="index.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>
二、css部分
/* 初始化 */
*{
margin: 0;
padding: 0;
}
body{
/* 100%的窗口高度 */
height: 100vh;
/* 弹性布局 水平 + 垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 自定义属性 (变量) 通过 var函数进行调用 */
--bg-color:#161616;
background-color: var(--bg-color);
}
.container{
width: 700px;
display: flex;
/* 让两个div中间距离相等 */
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;
/* --bg-color:red; */
background-color: var(--bg-color);
position: absolute;
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{
content: "";
width: 73px;
height: 16px;
background-color: var(--bg-color);
box-shadow: 0 6px 0 0 lightgray;
position: absolute;
bottom: 0;
left: -8px;
}
/* 雨滴背景范围 */
.rainy .rain{
width: 60px;
height: 60px;
background-color: var(--bg-color);
position: absolute;
top: 55%;
left: 20%;
}
/* 雨滴 */
.rainy .rain::after{
content: "";
position: absolute;
top: 50%;
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: -16px 0 0 -4px;
/* 执行动画 */
animation: rainy 2s linear infinite;
}
/* 多云 */
.cloudy{
position: relative;
width: 100px;
height: 100px;
/* 弹性布局 水平 + 垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 云朵 */
.cloudy .cloud{
z-index: 1;
width: 60px;
height: 60px;
/* --bg-color:red; */
background-color: var(--bg-color);
position: absolute;
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{
content: "";
width: 73px;
height: 16px;
background-color: var(--bg-color);
box-shadow: 0 6px 0 0 lightgray;
position: absolute;
bottom: 0;
left: -8px;
}
/* 小云朵 */
.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;
}
50%{
opacity: 0.3;
}
100%{
opacity: 0;
transform: scale(0.5) translate(-200%,-48px);
}
}
关注我
