css绘制古老的imac g3大屁股电脑效果代码
代码语言：html
所属分类：布局界面
代码描述：css绘制古老的imac g3大屁股电脑效果代码，支持暗黑模式。
代码标签： css 绘制 古老 imac g3 大屁股 电脑
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* General */
--hue: 223;
--trans-dur: 0.3s;
/* iMac */
--gn: #afe68b;
--gn-t: #afe68b00;
--b1: #494949;
--b2: #3d3d3d;
--b3: #2a2a2a;
--b4: #1c1c1c;
--b5: #000000b3;
--g1: #59605f;
--g2: #525857;
--g3: #4a5150;
--g4: #424948;
--w1: #f4f4f4;
--w2: #ececec;
--w3: #e6e6e6;
--w4: #e0e0e0;
--w5: #cdcdcd;
--w6: #c4c4c4;
--w7: #bfbfbf;
--w8: #b3b3b3;
--t1: #6cc9d4;
--t2: #5fb1bb;
--t3: #59a4ae;
--t4: #24a0b3;
--t5: #1f90a1;
--t6: #136571;
--t7: #0e525c;
--eb: #86a6f9;
--eb-t: #86a6f900;
}
body,
input {
font: 20px/1.5 sans-serif;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
input,
label {
-webkit-tap-highlight-color: transparent;
}
.sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.imac {
cursor: pointer;
perspective: 800px;
}
.imac__input {
position: fixed;
opacity: 0;
}
.imac__block,
.imac__side {
display: block;
width: 8em;
height: 8em;
}
.imac__block {
position: relative;
transform: rotateX(-22.5deg) rotateY(-30deg);
transform-style: preserve-3d;
transition: transform var(--trans-dur) ease-in-out;
}
.imac__side,
.imac__side:before,
.imac__side:after {
position: absolute;
}
.imac__side {
backface-visibility: hidden;
}
.imac__side:before,
.imac__side:after {
content: "";
display: block;
top: -1em;
left: -1em;
width: 1em;
height: 1em;
}
.imac__side:before {
transition: filter var(--trans-dur);
}
.imac__side--back {
transform: translateZ(-4em) rotateY(180deg);
}
.imac__side--back:before {
box-shadow:
1em 1em 0 var(--t6),
2em 1em 0 var(--t6),
3em 1em 0 var(--w3),
4em 1em 0 var(--t6),
5em 1em 0 var(--t6),
6em 1em 0 var(--w3),
7em 1em 0 var(--t6),
8em 1em 0 var(--t6),
1em 2em 0 var(--t6),
2em 2em 0 var(--t6),
3em 2em 0 var(--t6),
4em 2em 0 var(--w3),
5em 2em 0 var(--w3),
6em 2em 0 var(--t6),
7em 2em 0 var(--t6),
8em 2em 0 var(--t6),
1em 3em 0 var(--t5),
2em 3em 0 var(--t5),
3em 3em 0 var(--t5),
4em 3em 0 var(--t5),
5em 3em 0 var(--t5),
6em 3em 0 var(--t5),
7em 3em 0 var(--t5),
8em 3em 0 var(--t5),
1em 4em 0 var(--w4),
2em 4em 0 var(--w4),
3em 4em 0 var(--w4),
4em 4em 0 var(--w4),
5em 4em 0 var(--w4),
6em 4em 0 var(--w4),
7em 4em 0 var(--w4),
8em 4em 0 var(--w4),
1em 5em 0 var(--w4),
2em 5em 0 var(--w4),
3em 5em 0 var(--w4),
4em 5em 0 var(--t5),
5em 5em 0 var(--t5),
6em 5em 0 var(--w4),
7em 5em 0 var(--w4),
8em 5em 0 var(--w4),
1em 6em 0 var(--w4),
2em 6em 0 var(--w8),
3em 6em 0 var(--w2),
4em 6em 0 var(--w2),
5em 6em 0 var(--w2),
6em 6em 0 var(--w2),
7em 6em 0 var(--w4),
8em 6em 0 var(--w4),
1em 7em 0 var(--w2),
2em 7em 0 var(--w2),
3em 7em 0 var(--w2),
4em 7em 0 var(--w2),
5em 7em 0 var(--w2),
6em 7em 0 var(--w2),
7em 7em 0 var(--w2),
8em 7em 0 var(--w2),
1em 8em 0 var(--w2),
2em 8em 0 var(--w2),
3em 8em 0 var(--w2),
4em 8em 0 var(--w2),
5em 8em 0 var(--w2),
6em 8em 0 var(--w2),
7em 8em 0 var(--w2),
8em 8em 0 var(--w2);
}
.imac__side--top {
transform: rotateX(90deg) translateY(-4em);
transform-origin: 50% 0;
}
.imac__side--top:before {
box-shadow:
1em 1em 0 var(--t6),
2em 1em 0 var(--t6),
3em 1em 0 var(--w3),
4em 1em 0 var(--t6),
5em 1em 0 var(--t6),
6em 1em 0 var(--w3),
7em 1em 0 var(--t6),
8em 1em 0 var(--t6),
1em 2em 0 var(--t6),
2em 2em 0 var(--t6),
3em 2em 0 var(--t6),
4em 2em 0 var(--w3),
5em 2em 0 var(--w3),
6em 2em 0 var(--t6),
7em 2em 0 var(--t6),
8em 2em 0 var(--t6),
1em 3em 0 var(--t6),
2em 3em 0 var(--t6),
3em 3em 0 var(--t6),
4em 3em 0 var(--t7),
5em 3em 0 var(--t7),
6em 3em 0 var(--t6),
7em 3em 0 var(--t6),
8em 3em 0 var(--t6),
1em 4em 0 var(--t6),
2em 4em 0 var(--t6),
3em 4em 0 var(--t6),
4em 4em 0 var(--t6),
5em 4em 0 var(--t6),
6em 4em 0 var(--t6),
7em 4em 0 var(--t6),
8em 4em 0 var(--t6),
1em 5em 0 var(--t6),
2em 5em 0 var(--t6),
3em 5em 0 var(--t7),
4em 5em 0 var(--t7),
5em 5em 0 var(--t7),
6em 5em 0 var(--t7),
7em 5em 0 var(--t6),
8em 5em 0 var(--t6),
1em 6em 0 var(--t6),
2em 6em 0 var(--w3),
3em 6em 0 var(--w3),
4em 6em 0 var(--w3),
5em 6em 0 var(--w3),
6em 6em 0 var(--w3),
7em 6em 0 var(--w1),
8em 6em 0 var(--t6),
1em 7em 0 var(--w1),
2em 7em 0 var(--w3),
3em 7em 0 var(--w3),
4em 7em 0 var(--t5),
5em 7em 0 var(--t5),
6em 7em 0 var(--w3),
7em 7em 0 var(--w3),
8em 7em 0 var(--w1),
1em 8em 0 var(--w1),
2em 8em 0 var(--w3),
3em 8em 0 var(--w3),
4em 8em 0 var(--w3),
5em 8em 0 var(--w3),
6em 8em 0 var(--w3),
7em 8em 0 var(--w3),
8em 8em 0 var(--w1);
}
.imac__side--left {
transform: rotateY(270deg) translateX(-4em);
transform-origin: 0 50%;
}
.imac__side--left:before {
box-shadow:
1em 1em 0 var(--t6),
2em 1em 0 var(--t6),
3em 1em 0 var(--t6),
4em 1em 0 var(--t6),
5em 1em 0 var(--t6),
6em 1em 0 var(--t6),
7em 1em 0 var(--t6),
8em 1em 0 var(--t1),
1em 2em 0 var(--t6),
2em 2em 0 var(--t6),
3em 2em 0 var(--t6),
4em 2em 0 var(--t5),
5em 2em 0 var(--t5),
6em 2em 0 var(--t5),
7em 2em 0 var(--t2),
8em 2em 0 var(--t1),
1em 3em 0 var(--t5),
2em 3em 0 var(--t5),
3em 3em 0 var(--t5),
4em 3em 0 var(--t5),
5em 3em 0 var(--t5),
6em 3em 0 var(--t5),
7em 3em 0 var(--t2),
8em 3em 0 var(--t1),
1em 4em 0 var(--t4),
2em 4em 0 var(--t4),
3em 4em 0 var(--t5),
4em 4em 0 var(--t5),
5em 4em 0 var(--t5),
6em 4em 0 var(--t5),
7em 4em 0 var(--t3),
8em 4em 0 var(--t1),
1em 5em 0 var(--w4),
2em 5em 0 var(--w4),
3em 5em 0 var(--t4),
4em 5em 0 var(--t4),
5em 5em 0 var(--t5),
6em 5em 0 var(--t5),
7em 5em 0 var(--t3),
8em 5em 0 var(--t1),
1em 6em 0 var(--w4),
2em 6em 0 var(--w4),
3em 6em 0 var(--w4),
4em 6em 0 var(--w4),
5em 6em 0 var(--t4),
6em 6em 0 var(--t4),
7em 6em 0 var(--t2),
8em 6em 0 var(--t1),
1em 7em 0 var(--w4),
2em 7em 0 var(--w4),
3em 7em 0 var(--w4),
4em 7em 0 var(--w4),
5em 7em 0 var(--w4),
6em 7em 0 var(--w4),
7em 7em 0 var(--t2),
8em 7em 0 var(--t1),
1em 8em 0 var(--w2),
2em 8em 0 var(--w2),
3em 8em 0 var(--w4),
4em 8em 0 var(--w4),
5em 8em 0 var(--w4),
6em 8em 0 var(--w4),
7em 8em 0 var(--w4),
8em 8em 0 var(--w4);
}
.imac__side--bottom {
box-shadow:
0 0 1em 0.25em var(--b5),
0 9em 6em var(--eb-t);
transform: rotateX(90deg) translateY(4em);
transform-origin: 50% 100%;
transition: box-shadow var(--trans-dur);
}
.imac__side--bottom:after {
box-shadow: 6em 8.5em 1.5em var(--gn-t);
}
.imac__side--front {
transform: translateZ(4em);
}
.imac__side--front:before {
box-shadow:
1em 1em 0 var(--w3),
2em 1em 0 var(--w3),
3em 1em 0 var(--w1),
4em 1em 0 var(--w1),
5em 1em 0 var(--w1),
6em 1em 0 var(--w1),
7em 1em 0 var(--w1),
8em 1em 0 var(--w1),
1em 2em 0 var(--w3),
8em 2em 0 var(--w1),
1em 3em 0 var(--w3),
8em 3em 0 var(--w1),
1em 4em 0 var(--w3),
8em 4em 0 var(--w1),
1em 5em 0 var(--w3),
8em 5em 0 var(--w1),
1em 6em 0 var(--w3),
8em 6em 0 var(--w1),
1em 7em 0 var(--w3),
2em 7em 0 var(--w3),
3em 7em 0 var(--w3),
4em 7em 0 var(--w3),
5em 7em 0 var(--w3),
6em 7em 0 var(--w1),
7em 7em 0 var(--w1),
8em 7em 0 var(--w1),
1em 8em 0 var(--t5),
2em 8em 0 var(--t5),
3em 8em 0 var(--w4),
4em 8em 0 var(--w5),
5em 8em 0 var(--w5),
6em 8em 0 var(--w8),
7em 8em 0 var(--t5),
8em 8em 0 var(--t5);
}
.imac__side--front:after {
box-shadow:
6em 8em 0 var(--gn),
6em 8em 0.75em 0.1em var(--gn-t);
opacity: 0;
transition:
box-shadow var(--trans-dur),
opacity var(--trans-dur);
transform: translateZ(0);
}
.imac__side--right {
transform: rotateY(-270deg) translateX(4em);
transform-origin: 100% 0;
}
.imac__side--right:before {
box-shadow:
1em 1em 0 var(--t1),
2em 1em 0 var(--t6),
3em 1em 0 var(--t6),
4em 1em 0 var(--t6),
5em 1em 0 var(--t6),
6em 1em 0 var(--t6),
7em 1em 0 var(--t6),
8em 1em 0 var(--t6),
1em 2em 0 var(--t1),
2em 2em 0 var(--t2),
3em 2em 0 var(--t5),
4em 2em 0 var(--t5),
5em 2em 0 var(--t5),
6em 2em 0 var(--t6),
7em 2em 0 var(--t6),
8em 2em 0 var(--t6),
1em 3em 0 var(--t1),
2em 3em 0 var(--t2),
3em 3em 0 var(--t5),
4em 3em 0 var(--t5),
5em 3em 0 var(--t5),
6em 3em 0 var(--t5),
7em 3em 0 var(--t5),
8em 3em 0 var(--t5),
1em 4em 0 var(--t1),
2em 4em 0 var(--t3),
3em 4em 0 var(--t5),
4em 4em 0 var(--t5),
5em 4em 0 var(--t5),
6em 4em 0 var(--t5),
7em 4em 0 var(--t4),
8em 4em 0 var(--t4),
1em 5em 0 var(--t1),
2em 5em 0 var(--t3),
3em 5em 0 var(--t5),
4em 5em 0 var(--t5),
5em 5em 0 var(--t4),
6em 5em 0 var(--t4),
7em 5em 0 var(--w4),
8em 5em 0 var(--w4),
1em 6em 0 var(--t1),
2em 6em 0 var(--t2),
3em 6em 0 var(--t4),
4em 6em 0 var(--t4),
5em 6em 0 var(--w4),
6em 6em 0 var(--w4),
7em 6em 0 var(--w4),
8em 6em 0 var(--w4),
1em 7em 0 var(--t1),
2em 7em 0 var(--t2),
3em 7em 0 var(--w4),
4em 7em 0 var(--w4),
5em 7em 0 var(--w4),
6em 7em 0 var(--t5),
7em 7em 0 var(--w4),
8em 7em 0 var(--w4),
1em 8em 0 var(--w4),
2em 8em 0 var(--w4),
3em 8em 0 var(--w4),
4em 8em 0 var(--w4),
5em 8em 0 var(--w4),
6em 8em 0 var(--w4),
7em 8em 0 var(--w2),
8em 8em 0 var(--w2);
}
.imac__side--inner-right {
transform: rotateY(-270deg) translateX(4em) translateZ(-7em);
transform-origin: 100% 0;
}
.imac__side--inner-right:before {
box-shadow:
1em 2em 0 var(--w4),
1em 3em 0 var(--w4),
1em 4em 0 var(--w4),
1em 5em 0 var(--w4),
1em 6em 0 var(--w4);
}
.imac__side--inner-right:after {
box-shadow:
1em 2em 0 var(--eb),
1em 3em 0 var(--eb),
1em 4em 0 var(--eb),
1em 5em 0 var(--eb),
1em 6em 0 var(--eb);
}
.imac__side--inner-front {
transform: translateZ(3.5em);
}
.imac__side--inner-front:before {
box-shadow:
2em 1.5em 0 var(--b2),
3em 1.5em 0 var(--b2),
4em 1.5em 0 var(--b1),
5em 1.5em 0 var(--b1),
6em 1.5em 0 var(--b1),
7em 1.5em 0 var(--b1),
1.5em 2em 0 var(--b2),
1.5em 3em 0 var(--b2),
1.5em 4em 0 var(--b3),
1.5em 5em 0 var(--b3),
1.5em 6em 0 var(--b4),
7.5em 2em 0 var(--b1),
7.5em 3em 0 var(--b1),
7.5em 4em 0 var(--b2),
7.5em 5em 0 var(--b2),
7.5em 6em 0 var(--b3),
2em 6.5em 0 var(--b4),
3em 6.5em 0 var(--b4),.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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