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 {
          left: 15px;
          top: 10px;
        }
        .cloud1 * {
          border: 1px solid #110b00;    
        }
        .cloud1 .no-border {
          border: none; 
        }
        
        .cloud1 .c1 {
          border-top: 1px solid #000;
          border-left: 1px solid #000;
          width: 50px;
          height: 50px;
          top: 150px;
          left: 210px;
          -webkit-border-radius: 100%;
          -moz-border-radius: 100%;
          border-radius: 100%;
          background-color: #FFFFF0;
        }
        .cloud1 .c2 {
          border-right: 1px solid #000;
          width: 40px;
          height: 40px;
          top: 155px;
          left: 235px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          background-color: #FFFFF0;
          -webkit-transform: rotate(-83deg);
          -moz-transform: rotate(-83deg);
          -ms-transform: rotate(-83deg);
          -o-transform.........完整代码请登录后点击上方下载按钮下载查看