css布局实现中秋快乐卡片背景云动画效果代码-html代码-BFW代码库

css布局实现中秋快乐卡片背景云动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现中秋快乐卡片背景云动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
        }
        
        #app {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          overflow: hidden;
          background-color: #111;
        }
        #app .container {
          width: 80vh;
          height: 80vh;
          background-color: #3eddc5;
          overflow: hidden;
          position: relative;
          transition: 1s;
        }
        #app .container .text {
          position: absolute;
          font-size: 1rem;
          z-index: 100;
          transform: rotate(-90deg);
          top: 2rem;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        }
        #app .container .text p {
          margin: 12px 0;
          line-height: 0.5rem;
        }
        #app .container .moon {
          width: 100%;
          height: 100%;
          background-image: linear-gradient(90deg, #f4d558, #f2cf40);
          border-radius: 50%;
          position: absolute;
          top: -20%;
          right: 33%;
        }
        #app .container h4 {
          font-size: 1rem;
          z-index: 10;
          position: absolute;
          bottom: 0rem;
          left: 1rem;
          font-weight: 900;
        }
        #app .container .cloud {
          width: 13%;
          height: 5%;
          z-index: 10;
          background-image: linear-gradient(-90deg, rgba(250, 150, 150, 0.5), rgba(250, 150, 150, 0.1));
          position: absolute;
          border-radius: 2rem;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-duration: 2s;
          animation-name: moveIntensive;
          animation-duration: 2s;
        }
        #app .container .whiteCloud {
          width: 23%;
          height: 7%;
          z-index: 9;
          background-color: rgba(250, 250, 250, 0.9);
          position: absolute;
          border-radius: 1.5rem;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-duration: 2s;
          animation-name: move;
          animation-timing-function: ease-.........完整代码请登录后点击上方下载按钮下载查看