css绘制一个随鼠标移动发射激光炮的太空飞船战舰游戏效果代码-html代码-BFW代码库

css绘制一个随鼠标移动发射激光炮的太空飞船战舰游戏效果代码

代码语言：html

所属分类：游戏

代码描述：css绘制一个随鼠标移动发射激光炮的太空飞船战舰游戏效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        #scene{
          position:absolute;
          height:100%;
          width:100%;
            background:#13252d;
           
        
            
        }
        .grill{
          border-bottom:solid 2px #374043;
        border-top:solid 2px #374043;
         height:4px;   
            position:absolute;
            bottom:10%;
            width:80%;
            left:10%;
            opacity:1;
        }
        #ship {
            position: absolute;
            top: 120px;
            left: 120px;
        
            /*box-shadow:0px 60px 90px #a2b3c9,0 0 120px #a2b3c9,0 0 150px #fff;*/
            
            transform:rotate(0deg) scale(0.5);
        -ms-transform:rotate(0deg) scale(0.5);
        -moz-transform:rotate(0deg) scale(0.5);
        -webkit-transform:rotate(0deg) scale(0.5);
        -o-transform:rotate(0deg) scale(0.5);
            
                -webkit-transition:all 300ms linear, top 900ms bi-cubic;
        -moz-transition:all 300ms linear;
        -o-transition:all 300ms linear;
        -ms-transition:all 300ms linear;
        transition:all 300ms linear;
        }
        
        #ship div{
            
            -webkit-transition:all 300ms linear;
        -moz-transition:all 300ms linear;
        -o-transition:all 300ms linear;
        -ms-transition:all 300ms linear;
        transition:all 300ms linear;
        }
        #hull {
           
            width: 100px;
            height: 100px;
            background:#3a434f;
            position: relative;
            border-radius: 2px;
            -webkit-border-top-left-radius: 16px;
        -webkit-border-top-right-radius:  16px;
        -moz-border-radius-topleft:   16px;
        -moz-border-radius-topright:  16px;
        border-top-left-radius:   16px;
        border-top-right-radius:   16px;
        }
        #hull:after{
            content:'';
            display:block;
            
            position:absolute;
            bottom:-9px;
            left:-2px;
             width: 20px;
            height: 10px;  
        
            background: #3a434f;
            
        -webkit-transform: skew(-20deg);
           -moz-transform: skew(-20deg);
           -o-transform: skew(-20deg);
           transform: skew(-20deg);
            
        }
        
        #hull:before{
            content:'';
            display:block;
            
            position:absolute;
            bottom:-9px;
            right:-2px;
             width: 20px;
            height: 10px;  
        
            background: #3a434f;
            
        -webkit-transform: skew(20deg);
           -moz-transform: skew(20deg);
           -o-transform: skew(20deg);
           transform: skew(20deg);
            z-index:20;
            
        }
        #cockpit:after{
          content:'';
              width: 60%;
            left:20%;
            top:6px;
            height: 38px;
            border-radius:50%;
            border-top:solid 2px rgba(25,25,25,.2);
            display:none;
            z-index:21;
            position:absolute;
          
           
        }
        #cockpit:before{
          content:'';
              width: 60%;
            left:20%;
            top:-10px;
            height: 40px;
            border-radius:60%;
            border-bottom:solid 4px rgba(255,255,255,.5);
            display:block;
            z-index:21;
            position:absolute;
          
           
        }
        .inside{
          position:absolute;
        height:80%;
            margin:10%;
         width:80%;   
        }
        #canopy{
        background: #8397a0;
        background: -moz-linear-gradient(top,  #8397a0 0%, #556369 62%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8397a0), color-stop(62%,#556369));
        background: -webkit-linear-gradient(top,  #8397a0 0%,#556369 62%);
        background: -o-linear-gradient(top,  #8397a0 0%,#556369 62%);
        background: -ms-linear-gradient(top,  #8397a0 0%,#556369 62%);
        background: linear-gradient(to bottom,  #8397a0 0%,#556369 62%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8397a0', endColorstr='#556369',GradientType=0 );
        
        
        
        width:20%;
         left:40%;
        height:87px;
         position:absolute;
        bottom:0px;
        z-index:24;  
        border-top:solid 4px  #d98b1c;
        -webkit-border-top-left-radius: 4px.........完整代码请登录后点击上方下载按钮下载查看