css布局实现中秋节月亮与玉兔效果代码-html代码-BFW代码库

css布局实现中秋节月亮与玉兔效果代码

代码语言：html

代码描述：css布局实现中秋节月亮与玉兔效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
          background-color: #00002E;
        }
        
        #mid-autumn-festival * {
          position: absolute;  
          box-sizing:content-box;
          -moz-box-sizing:content-box;
        }
        
        #mid-autumn-festival {
          width: 400px;
          height: 400px;
        	margin: 100px auto;
          position: relative;
        }
        
        .moon {
          width: 200px;
          height: 200px;
          top: 30px;
          left: 100px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          background: #FFCC00;
          background: -webkit-linear-gradient(#FFFF00, #FFCC00);
          background: -o-linear-gradient(#FFFF00, #FFCC00);
          background: -moz-linear-gradient(#FFFF00, #FFCC00);
          background: linear-gradient(#FFFF00, #FFCC00);
        }
        .moon-halo {
          width: 200px;
          height: 200px;
          top: 30px;
          left: 100px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          -webkit-box-shadow: 0px 0px 30px 5px rgba(255, 255, 240, 1);
          -moz-box-shadow: 0px 0px 30px 5px rgba(255, 255, 240, 1);
          box-shadow: 0px 0px 30px 5px rgba(255, 255, 240, 1);
        }
        
        .cloud1 {
.........完整代码请登录后点击上方下载按钮下载查看