css布局实现一个任天堂游戏机效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现一个任天堂游戏机效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
body {
font-size: 0.9vmin;
background: #fff;
background: #fff;
background-size: 1300px;
background-repeat: no-repeat;
background-position: 62% 10%;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
body .btns_top {
z-index: 5;
position: absolute;
left: 0%;
top: 0%;
}
.switch_body {
width: 104em;
height: 45em;
position: absolute;
background: linear-gradient(#303135 2%, #3b5052 30%, #303135 70%) 25% 1%/6em 2em;
background-repeat: no-repeat;
}
.switch_body .controller_left {
width: 14.3em;
height: 43.5em;
top: 50%;
transform: translate(0, -50%);
position: absolute;
left: 0.2em;
background: radial-gradient(115% 50% at 100% 104%, rgba(255, 0, 0, 0) 45%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0) 60%) -1em -5em/15em 8em, radial-gradient(120% 100% at 101% 100%, #00b8de 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) -5.7em -8em/15em 16em, linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1), #00b8de) 0.5em 8em/2em 27.8em, linear-gradient(rgba(0, 0, 0, 0.1), #00b8de) 100% 0%/4.96em 2em, linear-gradient(#00b8de, rgba(0, 0, 0, 0.15)) 100% 100%/4.95em 2em, radial-gradient(120% 100% at 101% 0%, #00b8de 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) -5.7em 130%/15em 16em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, linear-gradient(#00b8de, #00b8de) 60% 99.6%/2em 8em, linear-gradient(#00b8de, #00b8de) 50% 50%/5em 27em, linear-gradient(#00b8de, #00b8de) 0.5em 50%/5em 27em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 0.5em/15em 16em, radial-gradient(120% 93% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5em -0.4em/15em 15em, radial-gradient(120% 93% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -6.4em -0.5em/18em 15em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, linear-gradient(#00b8de, #00b8de) 100% 0.1em/3em 27em, linear-gradient(#00b8de, #00b8de) 100% 1em/5em 42.5em;
background-repeat: no-repeat;
}
.switch_body .controller_left .btns .top_right {
box-shadow: 1px 1.5px 2px rgba(0, 0, 0, 0.8);
width: 2.5em;
height: 1em;
position: absolute;
background: linear-gradient(rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0) 80%) 100% 0.1em/100% 100%, #3B5052;
background-repeat: no-repeat;
border-radius: 2px;
top: 9.5%;
left: 76%;
}
.switch_body .controller_left .btns .joystick {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
width: 6.7em;
height: 6.7em;
position: absolute;
background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 60%) 50% 50%/100% 1em, linear-gradient(to left, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 60%) 50% 0%/1em 100%, radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 43%, #132630, transparent 50%) 50% 50%/100% 100%, #3B5052;
background-repeat: no-repeat;
border-radius: 50%;
left: 34%;
top: 18%;
}
.switch_body .controller_left .btns .joystick:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4.7em;
height: 4.7em;
border: 2px solid rgba(35, 35, 35, 0.7);
border-radius: 50%;
background: radial-gradient(circle at center top, rgba(168, 168, 168, 0.2) 20%, #3B5052 55%) 50% 50%/100% 100%, #3B5052;
background-repeat: no-repeat;
}
.switch_body .controller_left .btns .joystick:before {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(59, 80, 82, 0);
background-repeat: no-repeat;
}
.switch_body .controller_left .btns .arrows {
width: 11.5em;
height: 11em;
position: absolute;
top: 40.5%;
left: 55%;
transform: translate(-50%, 0);
}
.switch_body .controller_left .btns .arrows div {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
border-radius: 50%;
background: radial-gradient(100% 100% at 50% 90%, rgba(0, 0, 0, 0) 46%, rgba(233, 233, 231, 0.15) 50%) 50% -1.45em/110% 4em, linear-gradient(#404a4c, rgba(51, 59, 63, 0.6)) 50% 50%/100% 100%, #404A4C;
background-repeat: no-repeat;
width: 3.3em;
height: 3.3em;
position: absolute;
display: flex;
border: 2px solid rgba(35, 35, 35, 0.7);
}
.switch_body .controller_left .btns .arrows div i {
color: #1E1F1E;
transform: translate(-50%, 0%);
left: 50%;
position: absolute;
font-size: 2.4em;
}
.switch_body .controller_left .btns .arrows .up {
top: 5%;
left: 50.5%;
transform: translate(-50%, 0);
}
.switch_body .controller_left .btns .arrows .up i {
top: 3%;
}
.switch_body .controller_left .btns .arrows .down {
top: 67%;
left: 50%;
transform: translate(-50%, 0);
}
.switch_body .controller_left .btns .arrows .down i {
top: 12%;
}
.switch_body .controller_left .btns .arrows .left {
top: 35%;
left: 22%;
transform: translate(-50%, 0);
}
.switch_body .controller_left .btns .arrows .left i {
top: 9%;
left: 40%;
}
.switch_body .controller_left .btns .arrows .right {
top: 35%;
left: 80%;
transform: translate(-50%, 0);
}
.switch_body .controller_left .btns .arrows .right i {
top: 9%;
left: 59%;
}
.switch_body .controller_left .btns .under_arrows {
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
width: 2.6em;
height: 2.6em;
position: absolute;
background: radial-gradient(transparent, rgba(233, 233, 231, 0.1)), linear-gradient(#404a4c, #333b3f) 50% 50%/100% 100%, #3C4548;
left: 63%;
top: 69%;
border-radius: 2px;
}
.switch_body .controller_left .btns .under_arrows:after {
content: "";
width: 1.3em;
height: 1.3em;
background: radial-gradient(100% 100% at 50% 10%, rgba(0, 0, 0, 0) 57%, rgba(233, 233, 231, 0.2) 59%) 50% -1.5em/150% 4em, #333341;
border: 1px solid #232323;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.switch_body .controller_right {
top: 50%;
width: 14.3em;
height: 43.5em;
position: absolute;
left: 99.8%;
transform: translate(-100%, -50%);
background: radial-gradient(115% 50% at 0% 104%, rgba(255, 0, 0, 0) 45%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0) 60%) 0em -5em/16em 8em, radial-gradient(120% 100% at 0% 100%, #fe6054 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) 5em -7.8em/15em 16em, linear-gradient(to right, #fe6054, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)) 96.5% 8.2em/2em 27.6em, linear-gradient(rgba(0, 0, 0, 0.1), #fe6054) 0% 0.7%/5em 2em, linear-gradient(#fe6054, rgba(0, 0, 0, 0.15)) 0% 100%/4.95em 2em, radial-gradient(120% 100% at 0% 0%, #fe6054 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) 5em 130%/15em 16em, radial-gradient(120% 100% at 0% 50%, #fe6054 49%, rgba(0, 0, 0, 0) 50%) 5em 0.9%/15em 16em, radial-gradient(120% 93% at 0% 50%, #fe6054 49%, rgba(0, 0, 0, 0) 50%) 2.6em -0.5em/18em 15em, radial-gradient(120% 100% at 0% 50%, #fe6054 49%, rgba(0, 0, 0, 0) 50%) 4.95em 100%/15em 16em, linear-gradient(#fe6054, #fe6054) 50% 50%/5em 30.3em, linear-gradient(#fe6054, #fe6054) 94.5% 50%/5em 30.3em, linear-gradient(#fe6054, #fe6054) 0% 0.1em/3em 27em, linear-gradient(#fe6054, #fe6054) 0% 1em/5em 42.5em;
background-repeat: no-repeat;
}
.switch_body .controller_right .btns .d_pad {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
width: 2.2em;
height: 0.6em;
position: absolute;
background: linear-gradient(rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0) 80%) 100% 0.1em/100% 100%, #3B5052;
background-repeat: no-repeat;
border-radius: 2px;
top: 9.5%;
left: 7%;
}
.switch_body .controller_right .btns .d_pad:after {
content: "";
box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
width: 0.7em;
height: 2.2em;
position: absolute;
top: -110%;
left: 35%;
background: linear-gradient(rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0) 80%) 100% 0.1em/100% 100%, #3B5052;
background-repeat: no-repeat;
border-radius: 2px;
}
.switch_body .controller_right .btns .joystick {
box-shadow: 1px .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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