分享一组纯css动态好看的天气图标

Mack_yong

于 2023-02-28 15:19:23 发布

阅读量1.1k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/u011053926/article/details/129262392

版权

文章展示了如何利用CSS3来创建带有动画效果的天气图标，包括晴天、雨天和多云三种天气状态。代码示例中详细定义了各个元素的样式和动画关键帧，允许自定义颜色和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看看效果
在这里插入图片描述
都是带有css3动画的，下面直接上代码
HTML:

<div class="iconBox">
        <span class="title">天气图标</span>
        <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>
    </div>

CSS代码比较多，不过比用js写好多了。里面的颜色可以自行更换，动画效果也可以自己发挥

 .iconBox{
       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;
       background-color:  var(--bg-color);
       border-radius: 50%;
       box-shadow: 0 0 0 6px orange;
       animation: sunny 10s linear infinite;
   }
   .sunny .rays{
       position: absolute;
       top: -32px;
       left: 50%;
       transform: translateX(-50%);
       width: 6px;
       height: 18px;
       box-shadow: 0 86px yellow;
       background-color: yellow;
       border-radius: 4px;
   }
   .rays::before,.rays::after{
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 6px;
       height: 18px;
       box-shadow: 0 86px yellow;
       background-color: yellow;
       border-radius: 4px;
       transform-origin: 50% 52px;
       transform: rotate(60deg);
   }
   .rays::before{
    transform: rotate(-60deg);
   }
   @keyframes sunny {
       0%{
           transform: rotate(0);
       }
       100%{
           transform:rotate(360deg);
       }
   }

   .rainy{
       position: relative;
       width: 100px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-content: center;
   }
   .rainy .cloud{
       width: 60px;
       height: 60px;
       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: "";
       height: 16px;
       width: 73px;
       background-color: var(--bg-color);
       box-shadow: 0 6px 0 0 lightgray;
       position: absolute;
       bottom: 0;
       left: -8px;
   }
   .rainy .rain {
       width: 50px;
       height: 45px;
       background-color: var(--bg-color);
       position: absolute;
       top: 27%;
       left: 20%;
   }
   .rainy .rain::after{
       content: "";
       top: 50%;
       left: 50%;
       width: 18px;
       height: 18px;
       position: absolute;
       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);
       margin: 16px 0 0 -4px;
       transform: rotate(-28deg);
       animation: rainy 2s linear infinite;
   }
   @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%{
           /* background-color: rgba(255, 255, 255, 0.2); */
           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%{
           /* background-color: rgba(255, 255, 255, 0.2); */
           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;
       }
   }

   .cloudy{
       position: relative;
       width: 100px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-content: center;
   }
   .cloudy .cloud{
       z-index: 1;
       width: 60px;
       height: 60px;
       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: "";
       height: 16px;
       width: 73px;
       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: #ccc;
       box-shadow: -35px 11px 0 -11px #ccc,
       33px 15px 0 -15px #ccc,
       0 0 0 6px #ccc,
        -35px 11px 0 -5px #ccc, 
       33px 15px 0 -9px #ccc;
       opacity: 0.3;
       transform: scale(0.5) translate(96px,-48px);
       animation: cloudy 3s linear infinite;
   }
   .cloudy .cloud:nth-child(2)::after{
    background-color:#ccc;
    box-shadow: 0 6px 0 0 #ccc;
   }
   @keyframes cloudy {
       0%{
           opacity: 0;
       }
       50%{
           opacity: 0.3;
       }
       100%{
           opacity: 1;
           transform: scale(0.5) translate(-120px,-48px);
       }
   }