单个div+css布局实现窗外月色美景效果代码-html代码-BFW代码库

单个div+css布局实现窗外月色美景效果代码

代码语言：html

代码描述：仅仅使用了单个div集合部分css代码布局实现窗外月色夜景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        body {
          min-height: 330px;
          height: 100vh;
          position: relative;
          background-color: #362d68;
          text-align: center;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div {
            transform: scale(0.8);
          }
        }
        #shine {
          box-sizing: border-box;
          font-size: 10px;
          width: 20em;
          height: 25em;
          margin-left: -10em;
          margin-top: -13.2em;
          background-repeat: no-repeat;
          background-image: linear-gradient(#6a5acd, #6a5acd), repeating-linear-gradient(to bottom, #48d1cc, #48d1cc 0.1em, #6a5acd 0.1em, #6a5acd 0.4em, transparent 0.4em, transparent 0.9em), linear-gradient(#6a5acd 40%, #48d1cc), radial-gradient(circle, #48d1cc 30%, rgba(72,209,204,0) 31%), radial-gradient(circle, #7fffd4 50%, rgba(127,255,212,0) 51%), linear-gradient(#48d1cc, #48d1cc), linear-gradient(60deg, transparent 40%, #483d8b 41%), linea.........完整代码请登录后点击上方下载按钮下载查看