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