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

网友评论0