用HTML+css制作一个动态的天气图标
前言
本文讲解用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); }}关注我
