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, #272b24 0%,#565656 49%,#272b24 100%);
background: -ms-linear-gradient(left, #272b24 0%,#565656 49%,#272b24 100%);
background: linear-gradient(to right, #272b24 0%,#565656 49%,#272b24 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272b24', endColorstr='#272b24',GradientType=1 );
}
.cover{
box-shadow:0 0 2px #273133;
border-radius:1px;
background: #455052;
background: -moz-linear-gradient(left, #455052 0%, #5b6b72 50%, #455052 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#455052), color-stop(50%,#5b6b72), color-stop(100%,#455052));
background: -webkit-linear-gradient(left, #455052 0%,#5b6b72 50%,#455052 100%);
background: -o-linear-gradient(left, #455052 0%,#5b6b72 50%,#455052 100%);
background: -ms-linear-gradient(left, #455052 0%,#5b6b72 50%,#455052 100%);
background: linear-gradient(to right, #455052 0%,#5b6b72 50%,#455052 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455052', endColorstr='#455052',GradientType=1 );
width:80%;
height:80%;
position:absolute;
left:10%;
top:10%;
z-index:12;
}
.cover-hull{
}
.side-rocket {
background:#3a434f;
height: 50px;
width: 34px;
position: absolute;
z-index:4;
bottom: 4px;
border-radius: 2px;
}
.side-rocket .grill{
bottom:20%;
height:3px;
}
.connector {
height: 20px;
width: 56px;
z-index:4;
bottom: 18px;
position: absolute;
background: #6a7077;
background: -moz-linear-gradient(top, #6a7077 0%, #4b4f55 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a7077), color-stop(51%,#4b4f55));
background: -webkit-linear-gradient(top, #6a7077 0%,#4b4f55 51%);
background: -o-linear-gradient(top, #6a7077 0%,#4b4f55 51%);
background: -ms-linear-gradient(top, #6a7077 0%,#4b4f55 51%);
background: linear-gradient(to bottom, #6a7077 0%,#4b4f55 51%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a7077', endColorstr='#4b4f55',GradientType=0 );
}
.cannon {
height: 40px;
background: #92adb2;
border-bottom:solid 1px #404750;
box-shadow:0px 1px 0px #404750;
background: -moz-linear-gradient(top, #92adb2 49%, #74898c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(49%,#92adb2), color-stop(100%,#74898c));
background: -webkit-linear-gradient(top, #92adb2 49%,#74898c 100%);
background: -o-linear-gradient(top, #92adb2 49%,#74898c 100%);
background: -ms-linear-gradient(top, #92adb2 49%,#74898c 100%);
background: linear-gradient(to bottom, #92adb2 49%,#74898c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92adb2', endColorstr='#74898c',GradientType=0 );
width: 6px;
position: absolute;
top: -35px;
left: 7px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.cannon:after{
content:'';
height:3px;
display:block;
width:12px;
position:absolute;
left:-3px;
top:6px;
background:#6d747d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius:50%;
}
.cannon:before{
content:'';
height:3px;
display:block;
width:12px;
position:absolute;
left:-3px;
top:10px;
background:#6d747d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius:50%;
}
.burner{
position:absolute;
width:90%;
left:5%;
border-bottom: solid 2px #222;
height:12px;
bottom:-14px;
background: #272b24;
background: -moz-linear-gradient(left, #272b24 0%, #565656 49%, #272b24 100%);
background: -webkit-gradient(linear, left top, ri.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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