css布局实现中秋节快乐背景效果代码-html代码-BFW代码库

css布局实现中秋节快乐背景效果代码

代码语言：html

所属分类：背景

代码描述：css布局实现中秋节快乐背景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Pacifico|Passion+One:400,700,900" rel="stylesheet">



    <style>
        /*----- General Settings ------*/
        * {
         padding: 0;
         margin: 0;position: relative;
         box-sizing: border-box;
        }
        
        ::-webkit-scrollbar {
         display: none;
        }
        
        
        /*----- Background Settings ------*/
        .background {
          width: 100%;
          height: 100vhq;
          min-height: 790px;
          background: #7C579E;
          background: linear-gradient(#B0458E, #6960A4);
        }
        
        /*----- Moon Settings ------*/
        /*--- Moon ---*/
        .moon {
          position: absolute;
          top: 15%;
          left: 55%;
          width: 250px;
          height: 250px;
          background: #F8D55E;
          border-radius: 50%;
          border: 7px solid #F6DF99;
          box-shadow: inset -45px -25px rgba(0,0,0,.1);
        }
        .moon:before {
          content: '';
          position: absolute;
          top: -5px;
          left: -5px;
          width: 245px;
          height: 245px;
          border-radius: 50%;
          box-shadow: 0 0 30px 30px rgba(255,255,255,0.1), 0 0 15px 15px rgba(255,255,255,0.3), 0 0 10px 10px rgba(255,255,255,0.5);
        }
        
        /*--- Circle inside ---*/
        .circle {
          position: absolute;
          background: #EFC853;
          border-radius: 50%;
          border: 3px solid #C5A34A;
          box-shadow: inset -1px 2px rgba(0,0,0,.2);
        }
        
        .cirlce-one {
          width: 35px;
          height: 35px;
          top: 22%;
          left: 15%;
        }
        .cirlce-two {
          width: 22px;
          height: 22px;
          top: 15%;
          left: 27%;
        }
        .cirlce-three {
          width: 30px;
          height: 30px;
          top: 15%;
          left: 38%;
        }
        .cirlce-four {
          width: 15px;
          height: 15px;
          top: 10%;
          left: 50%;
        }
        
        .circle-inverse {
          position: absolute;
          background: #F8D55E;
          border-radius: 50%;
          border: 3px solid #E1BA56;
          box-shadow: inset -2px -4px rgba(0,0,0,.2);
        }
        
        .cirlce-five {
          width: 35px;
          height: 35px;
          bottom: 14%;
          right: 15%;
        }
        
        .cirlce-six {
          width: 20px;
          height: 20px;
          bottom: 8%;
          right: 25%;
        }
        
        .cirlce-seven {
          width: 15px;
          height: 15px;
          bottom: 27%;
          right: 20%;
        }
        
        /*----- Star Settings ------*/
        .star {
          position: absolute;
          border-radius: 50%;
          background: #F6DF99;
          animation: blink 2s ease-in infinite;
        }
        
        
        .star-1 {
          top: 7%;
          left: 10%;
          width: 15px;
          height: 15px;
        }
        
        .star-2 {
          top: 30%;
          left: 37%; 
          width: 7px;
          height: 7px;
        }
        
        .star-3 {
          top: 55%;
          right: 10%;
          width: 15px;
          height: 15px;
        }
        
        /*----- Cloud Settings ------*/
        /*--- Positioning the cloud ---*/
        .cloud-container {
          position: absolute;
          width: 100%;
          animation: move 5s linear infinite forwards;
        }
        
        .cloud-1 {
          top: 17%;
          left: 30%;
          animation: move 10s linear infinite reverse;
        }
        
        .cloud-2 {
          top: 60%;
          left: 80%;
          animation: move 13s linear infinite alternate;
        }
     .........完整代码请登录后点击上方下载按钮下载查看