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 {
        .........完整代码请登录后点击上方下载按钮下载查看