前言
本文讲解用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); } }
关注我
