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

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

代码语言：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(330p.........完整代码请登录后点击上方下载按钮下载查看