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;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright:4px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
box-shadow:inset 0 -4px 0px rgba(25,25,25,.7),inset 0 -1px 2px rgba(25,25,25,.2);
}
#cockpit{
background:#4f585e;
box-shadow:inset 0px 2px 12px rgba(25,25,25,.5);
height: 90px;
left:10px;
position: absolute;
width:80px;
bottom: 80px;
-webkit-border-top-left-radius: 68%;
-webkit-border-top-right-radius: 68%;
-moz-border-radius-topleft: 68%;
-moz-border-radius-topright: 68%;
border-top-left-radius: 68%;
border-top-right-radius: 68%;
z-index:13;
border-bottom:solid 1px #3a434f;
background: #5f6c70;
background: -moz-linear-gradient(top, #5f6c70 0%, #6c7b7f 50%, #5f6c70 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5f6c70), color-stop(50%,#6c7b7f), color-stop(100%,#5f6c70));
background: -webkit-linear-gradient(top, #5f6c70 0%,#6c7b7f 50%,#5f6c70 100%);
background: -o-linear-gradient(top, #5f6c70 0%,#6c7b7f 50%,#5f6c70 100%);
background: -ms-linear-gradient(top, #5f6c70 0%,#6c7b7f 50%,#5f6c70 100%);
background: linear-gradient(to bottom, #5f6c70 0%,#6c7b7f 50%,#5f6c70 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f6c70', endColorstr='#5f6c70',GradientType=0 );
}
#cockpit .glass{
left:10%;
top:4%;
position: absolute;
width:80%;
height:80%;
-webkit-border-top-left-radius: 68%;
-webkit-border-top-right-radius: 68%;
-moz-border-radius-topleft: 68%;
-moz-border-radius-topright: 68%;
border-top-left-radius: 68%;
border-top-right-radius: 68%;
z-index:13;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius:8px;
}
.glass {
background:rgba(249,212,63,.9);
background: rgba(251,228,124,.9);
background: -moz-linear-gradient(top, rgba(251,228,124,1) 0%, rgba(240,217,113,1) 20%, rgba(204,180,76,1) 63%, rgba(195,172,66,1) 69%, rgba(196,172,66,1) 71%, rgba(184,161,53,1) 86%, rgba(177,153,47,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,228,124,1)), color-stop(20%,rgba(240,217,113,1)), color-stop(63%,rgba(204,180,76,1)), color-stop(69%,rgba(195,172,66,1)), color-stop(71%,rgba(196,172,66,1)), color-stop(86%,rgba(184,161,53,1)), color-stop(100%,rgba(177,153,47,1)));
background: -webkit-linear-gradient(top, rgba(251,228,124,1) 0%,rgba(240,217,113,1) 20%,rgba(204,180,76,1) 63%,rgba(195,172,66,1) 69%,rgba(196,172,66,1) 71%,rgba(184,161,53,1) 86%,rgba(177,153,47,1) 100%);
background: -o-linear-gradient(top, rgba(251,228,124,1) 0%,rgba(240,217,113,1) 20%,rgba(204,180,76,1) 63%,rgba(195,172,66,1) 69%,rgba(196,172,66,1) 71%,rgba(184,161,53,1) 86%,rgba(177,153,47,1) 100%);
background: -ms-linear-gradient(top, rgba(251,228,124,1) 0%,rgba(240,217,113,1) 20%,rgba(204,180,76,1) 63%,rgba(195,172,66,1) 69%,rgba(196,172,66,1) 71%,rgba(184,161,53,1) 86%,rgba(177,153,47,1) 100%);
background: linear-gradient(to bottom, rgba(251,228,124,1) 0%,rgba(240,217,113,1) 20%,rgba(204,180,76,1) 63%,rgba(195,172,66,1) 69%,rgba(196,172,66,1) 71%,rgba(184,161,53,1) 86%,rgba(177,153,47,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbe47c', endColorstr='#b1992f',GradientType=0 );
}
#rear-rocket{
border-bottom: solid 2px #222;
position:absolute;
width:80%;
left:10%;
height:12px;
bottom:-16px;
background: #272b24;
background: -moz-linear-gradient(left, #272b24 0%, #565656 49%, #272b24 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#272b24), color-stop(49%,#565656), color-stop(100%,#272b24));
background: -webkit-linear-gradient(left, #272b24 0%,#565656 49%,#272b24 100%);
background: -o-linear-gradient(left, #2.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0