css布局天气预报卡片盒子动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局天气预报卡片盒子动画效果代码，bing显示多个地区的天气预报动画。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500,600,700'>

    <style>
        @charset "UTF-8";
        * {
          font-family: "Hind Vadodara", sans- serif, "微軟正黑體";
          position: relative;
        }
        
        html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #333;
        }
        
        .daybox {
          width: 50%;
          max-width: 400px;
        }
        
        .top {
          height: 330px;
          background: rgba(0, 0, 0, 0.9);
          border-radius: 20px 20px 0 0;
          background: linear-gradient(20deg, #19283D, #1D678F);
          box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.3);
        }
        
        .text_area {
          width: 100px;
          height: 160px;
          margin: 0 auto;
          color: #fff;
        }
        .text_area h4, .text_area h2, .text_area h1 {
          position: absolute;
        }
        .text_area h4 {
          top: 10px;
          left: 3px;
          opacity: 0.6;
        }
        .text_area h2 {
          top: 40px;
          left: -10px;
          opacity: 0.8;
        }
        .text_area h1 {
          top: 70px;
          left: -15px;
          font-size: 50px;
        }
        
        .cloud {
          width: 100px;
          height: 36px;
          position: absolute;
          left: 140px;
          bottom: 80px;
          border-radius: 20px;
          background: #fff;
          animation: clouddrift 4s infinite;
        }
        .cloud:before, .cloud:after {
          content: "";
          width: 50px;
          height: 50px;
          display: block;
          position: absolute;
          border-radius: 100%;
          background: #fff;
        }
        .cloud:before {
          left: 16px;
          top: -28px;
        }
        .cloud:after {
          left: 35px;
          top: -20px;
        }
        
        @keyframes clouddrift {
          0% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-20px);
          }
          100% {
            transform: translateY(0px);
          }
        }
        .rain {
          width: 10px;
          height: 30px;
          left: 25px;
          bottom: 15px;
          position: absolute;
          animation: raindrop 2s infinite linear;
          background: blue;
        }
        
        @keyframes raindrop {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(50px);
            opacity: 0;
          }
        }
        .rain2 {
          left: 70px;
          bottom: 20px;
          animation-delay: 0.4s;
        }
        
        .rain3 {
          left: 30px;
          bottom: 20px;
          animation-delay: 0.7s;
        }
        
        .rain_all {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
        }
        .rain_all .rain100 {
          animation: raindrop2 0.6s infinite linear;
          background: #69c;
          border-radius: 100%;
          width: 14px;
          height: 20px;
          position: absolute;
        }
        .rain_all .rain01 {
          left: 10px;
          animation-delay: 0.4s;
        }
        .rain_all .rain02 {
          top: 0;
          left: 50px;
          animation-delay: 0.4s;
        }
        .rain_all .rain03 {
          left: 90px;
          animation-delay: 0.7s;
        }
        .rain_all .rain04 {
          left: 130px;
          animation-delay: 0.8s;
        }
        .rain_all .rain05 {
          left: 170px;
          animation-delay: 1s;
        }
        .rain_all .rain06 {
          left: 210px;
          animation-delay: 0.2s;
        }
        .rain_all .rain08 {
          left: 250px;
          animation-delay: 0.4s;
        }
        .rain_all .rain09 {
          left: 290px;
          animation-delay: 0.6s;
        }
        .rain_all .rain10 {
          left: 330px;
          animation-delay: 0.4s;
        }
        .rain_all .rain11 {
          left: 330px;
          animation-delay: 1.2s;
        }
        .rain_all .rain12 {
          left: 300px;
          animation-delay: 1.25s;
        }
        .rain_all .rain13 {
          left: 270px;
          animation-delay: 1.3s;
        }
        .rain_all .rain14 {
          left: 240px;
          animation-delay: 1.5s;
        }
        .rain_all .rain15 {
          left: 200px;
          animation-delay: 1s;
        }
        
        @keyframes raindrop2 {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(330px);
            opacity: 0;
          }
        }
        .bottom {
          height: 140px;
          display: flex;
          justify-content: center;
          border-radius: 0px 0px 20px 20px;
          background: #fff;
          box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.3);
        }
        .bottom .dayweather {
          width: calc(100% / 7 - 5px);
          display: inline-block;
          font-size: 10px;
          text-align: center;
          font-weight: 400;
          letter-spacing: 1px;
          top: 20px;
        }
        .bottom .dayweather svg {
          width: 100%;
          max-width: 40px;
          height: 30px;
          margin-left: 0.1px;
        }
        .bottom .dayweather .sun {
          stroke-width: 30px;
          stroke-dasharray: 5px;
          stroke: rgba(255, 214, 51, 0.5);
          fill: #FFD633;
        }
        .bottom .dayweather .cloud {
          fill: rgba(136, 136, 136, 0.9);
          animation: clouddrift 1s infinite;
        }
        .bottom .dayweather .rain {
          storke: #4DACFF;
        }
        
        .rain7 {
          width: 1px;
          height: 3px;
          position: absolute;
          animation: raindrop3 1s infinite linear;
          background: #69c;
        }
        
        .rain001 {
          top: 55px;
          left: 15px;
        }
        
        .rain002 {
          top: 58px;
          left: 19px;
        }
        
        .rain003 {
          top: 65px;
          left: 25px;
        }
        
        @keyframes raindrop3 {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(20px);
            opacity: 0;
          }
        }
        input {
          opacity: 0;
        }
        
        .top2 {
          background: rgba(0, 0, 0, 0.9);
        }
        
        .snow {
          animation: raindrop2 2s infinite linear;
          background: #fff;
          border-radius: 100%;
          width: 15px;
          height: 15px;
          position: absolute;
        }
        
        .snow_all {
          background: #fff;
          border-radius: 100%;
          width: 20px;
          height: 6px;
          animation: snowop 0.6s infinite linear;
          position: absolute;
        }
        
        .snow_all_2 {
          animation: snowop02 0.2s infinite linear;
        }
        
        .snow01 {
          top: 20px;
        }
        
        .snow02 {
          top: 100px;
        }
        
        .snow03 {
          top: 180px;
        }
        
        .snow04 {
          top: 20px;
          right: 0;
        }
        
        .snow05 {
          top: 100px;
          right: 0;
        }
        
        .snow06 {
          top: 180px;
          right: 0;
        }
        
        .snow07 {
          top: 100px;
        }
        
        .snow08 {
          top: 110px;
        }
        
        .snow09 {
          top: 120px;
        }
        
        .snow10 {
          top: 130px;
        }
        
        @keyframes snowop {
          0% {
            transform: translateX(0px);
          }
          100% {
            transform: translate(400px, 65px);
            opacity: 0;
          }
        }
        @keyframes snowop02 {
          0% {
            transform: translateX(0px);
          }
          100% {
            transform: translate(-400px, 65px);
            opacity: 0;
          }
        }
        .snower {
          border: 1px solid;
          width: 50px;
          height: 50px;
          position: absolute;
          background: #fff;
          border-radius: 100%;
          animation: snowop06 2s infinite linear;
          left: 150px;
          bottom: 100px;
        }
        .snower:before, .snower:after {
          position: absolute;
          content: "";
          background: #fff;
          display: block;
        }
        .snower:before {
          width: 70px;
          height: 70px;
          border-radius: 70%;
          top: 30px;
          margin-left: -7px;
        }
        .snower h3 {
          position: absolute;
          top: -10px;
          left: 10px;
          font-weight: 700;
        }
        
        .snower2 {
          stroke-width: 10px;
          stroke: #eee;
          fill: #eee;
        }
        
        .snower3 {
          stroke-width: 20px;
          fill: #fff;
        }
        
        .bottom02 {
          background: rgba(255, 255, 255, 0.6);
        }
        
        .snow07 {
          background: #fff;
          animation: snowop05 2s infinite linear;
          width: 5px;
          height: 5px;
          border-radius: 100%;
        }
        @keyframes snowop05 {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(40px);
          }
        }
        
        .snow001 {
          top: 40px;
        }
        
        .snow002 {
          top: 42px;
          left: 20px;
        }
        
        .snow003 {
          top: 37px;
          left: 24px;
        }
        @keyframes snowop06 {
          0% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(20px);
          }
          100% {
            transform: translateY(0px);
          }
        }
        @keyframes all {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(-600px);
            opacity: 1;
          }
        }
        
        .box1 {
          margin-right: 20px;
        }
        
        .text {
          width: 120px;
          height: 100px;
          position: absolute;
          bottom: 0;
          font-size: 15px;
          font-weight: 400;
          text-align: center;
          border-radius: 20px;
          color: #fff;
        }
    </style>



</head>

<body>
    <div class="daybox box1">
        <label>
    <input id="swicth" type="checkbox"/>
    <div class="top">
      <div class="text_area">
        <h4>Tawain</h4>
        <h2>Keelung</h2>
        <h1>16°C</h1>
      </div>
      <div class="cloud"> 
        <div class="rain">
          <div class="rain rain2"></div>
          <div class="rain rain3"></div>
        </div>
      </div>
      <div class="rain_all">
        <div class="rain01 rain100"></div>
        <div class="rain02 rain100"></div>
        <div class="rain03 rain100"></div>
        <div class="rain04 rain100"></div>
        <div class="rain05 rain100"></div>
        <div class="rain06 rain100"></div>
        <div class="rain07 rain100"></div>
        <div class="rain08 rain100"></div>
        <div class="rain09 rain100"></div>
        <div class="rain10 rain100"></div>
        <div class="rain11 rain100"></div>
        <div class="rain12 rain100"></div>
        <div class="rain13 rain100"></div>
        <div class="rain14 rain100"></div>
        <div class="rain15 rain100"></div>
        <div class="text">
          <h3>基隆市暖暖區</h3>
          <h3>星期二18:00</h3>
        </div>
      </div>
    </div>
    <div class="bottom"> 
      <div class="dayweather">
        <h3>ㄧ</h3>
        <svg viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="sun" cx="0" cy="0" r="22"></circle>
        </svg>
        <h3>16°C  </h3>
      </div>
      <div class="dayweather">
        <h3>二</h3>
        <svg viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="sun" cx="0" cy="0" r="22"> </circle>
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="cloud" cx="0" cy="30" r="20"></circle>
          <circle class="cloud" cx="-15" cy="30" r="20"></circle>
          <circle class="cloud" cx="-30" cy="30" r="20"></circle>
          <circle class="cloud" cx="-25" cy="10" r="15"></circle>
          <circle class="cloud" cx="-7" cy="15" r="15"></circle>
        </svg>
        <h3>22°C   </h3>
      </div>
      <div class="dayweather">
        <h3>三</h3>
        <svg viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="sun" cx="0" cy="0" r="22"> </circle>
          <circle class="sun" cx="0" cy="0" r="22"></circle>
          <circle class="sun" cx="0" cy="0" r="22"></circle>
        </svg>
        <h3>24°C </h3>
      </div>
      <div class="dayweather">
 .........完整代码请登录后点击上方下载按钮下载查看