div+css+js实现老式三维磁带声音机录音机按下播放音乐效果代码
代码语言：html
所属分类：动画
代码描述：div+css+js实现老式三维磁带声音机录音机按下播放音乐效果代码
代码标签： div css js 老式 三维 磁带 声音机 录音机 按下 播放 音乐
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
font-family: cursive;
}
/***********************/
/***********************/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
cursor: grab;
background-color: #fffff9;
}
.face {
position: absolute;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main {
position: absolute;
width: 70vmin;
height: 49vmin;
transform: perspective(700vmin) rotateX(60deg) rotateZ(40deg) translateZ(-10.5vmin);
transition: transform 350ms ease-out;
}
.shadows {
position: absolute;
top: 0;
left: -2%;
width: 102%;
height: 100%;
transform: translateZ(-0.175vmin);
background-color: #a67e6e;
}
.shadow {
position: absolute;
}
.shadow-1 {
top: 100%;
width: 100%;
height: 7vmin;
transform-origin: top left;
transform: skewX(-5deg);
background-image: linear-gradient(to bottom, #a67e6e, #b39284, #bda094 40%);
}
.shadow-2 {
left: 100%;
width: 1.75vmin;
height: 100%;
transform-origin: top left;
transform: skewY(40deg);
background-image: linear-gradient(to right, #a67e6e, #bda094);
}
.waves {
position: absolute;
top: 112%;
left: 0;
display: grid;
grid-auto-flow: column;
width: 100%;
height: 100%;
}
.is-wave-playing {
display: none;
}
.wave {
height: 0vmin;
width: 7vmin;
background-color: #bda094;
}
.wave:nth-of-type(2) {
animation: wave 500ms ease-in alternate infinite 200ms;
}
.wave:nth-of-type(3) {
animation: wave 500ms ease-in alternate infinite 300ms;
}
.wave:nth-of-type(4) {
animation: wave 500ms ease-in alternate infinite 400ms;
}
.wave:nth-of-type(5) {
animation: wave 500ms ease-in alternate infinite 500ms;
}
.wave:nth-of-type(6) {
animation: wave 500ms ease-in alternate infinite 600ms;
}
.wave:nth-of-type(1), .wave:nth-of-type(7) {
height: 0vmin;
animation: wave-2 600ms ease-in alternate infinite 4250ms;
}
@keyframes wave {
0%, 100% {
height: 7vmin;
}
24% {
height: 10.5vmin;
}
25%, 30% {
height: 11.375vmin;
}
55%, 60% {
height: 7.875vmin;
}
61%, 65% {
height: 11.55vmin;
}
80%, 82% {
height: 6.125vmin;
}
83%, 90% {
height: 5.25vmin;
}
95% {
height: 5.6875vmin;
}
}
@keyframes wave-2 {
0%, 50% {
height: 0vmin;
}
75%, 100% {
height: 8.75vmin;
}
}
.a {
width: 66.5vmin;
height: 47.25vmin;
position: absolute;
top: 0.875vmin;
left: 0;
}
.a__front {
width: 66.5vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(45.5vmin);
}
.a__back {
width: 66.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-66.5vmin) translateY(-1.75vmin);
}
.a__right {
width: 47.25vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(66.5vmin) translateX(-47.25vmin) translateY(-1.75vmin);
}
.a__left {
width: 47.25vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.a__top {
width: 66.5vmin;
height: 47.25vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.a__bottom {
width: 66.5vmin;
height: 47.25vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-66.5vmin);
}
.a__front {
background-image: linear-gradient(to bottom, #988193, #bfb1bc);
}
.a__back {
background-image: linear-gradient(to bottom, #be9eb9, #d7c3d3);
}
.a__left {
background-image: linear-gradient(to bottom, #988193, #bfb1bc);
}
.a__right {
background-image: linear-gradient(to bottom, #aa97a6, #c1b3be);
}
.a__top {
background-color: #e7dbe5;
}
.a__bottom {
background-color: #aa97a6;
box-shadow: 0 0 1.3125vmin 0.875vmin #62473c;
}
.b {
width: 70vmin;
height: 49vmin;
position: absolute;
top: 0;
left: 0;
transform: translateZ(1.75vmin);
}
.b__front {
width: 70vmin;
height: 5.25vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(43.75vmin);
}
.b__back {
width: 70vmin;
height: 5.25vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-70vmin) translateY(-5.25vmin);
}
.b__right {
width: 49vmin;
height: 5.25vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(70vmin) translateX(-49vmin) translateY(-5.25vmin);
}
.b__left {
width: 49vmin;
height: 5.25vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.25vmin);
}
.b__top {
width: 70vmin;
height: 49vmin;
transform-origin: top left;
transform: translateZ(5.25vmin);
}
.b__bottom {
width: 70vmin;
height: 49vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-70vmin);
}
.b__front {
background-image: linear-gradient(to top, #2c2514, #3d341c);
border-top: 0.35vmin solid #62532c;
border-bottom: 0.35vmin solid #2b2513;
}
.b__front::after {
content: "";
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 7.875vmin;
height: 2.1875vmin;
background-image: linear-gradient(to right, #0c0a05, black, #0c0a05);
}
.b__back {
background-image: linear-gradient(to bottom, #2c2514, #3d341c);
border-top: 0.35vmin solid #62532c;
border-bottom: 0.35vmin solid #3a311a;
}
.b__left {
background-image: linear-gradient(to top, #2c2514, #3d341c);
border-top: 0.35vmin solid #62532c;
border-bottom: 0.35vmin solid #2c2514;
}
.b__right {
background-image: linear-gradient(to top, #1d190d, #2f2815);
border-top: 0.35vmin solid #4e4324;
border-bottom: 0.35vmin solid #0c0a05;
}
.b__top {
background-color: #211c0f;
}
.b__bottom {
background-color: #0c0a05;
}
.c {
width: 38.325vmin;
height: 48.3vmin;
position: absolute;
top: 0.175vmin;
left: 0.175vmin;
transform: translateZ(7.175vmin);
}
.c__front {
width: 38.325vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(46.55vmin);
}
.c__back {
width: 38.325vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-38.325vmin) translateY(-1.75vmin);
}
.c__right {
width: 48.3vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(38.325vmin) translateX(-48.3vmin) translateY(-1.75vmin);
}
.c__left {
width: 48.3vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.c__top {
width: 38.325vmin;
height: 48.3vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.c__bottom {
width: 38.325vmin;
height: 48.3vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-38.325vmin);
}
.c__front {
background-image: linear-gradient(to top, #674e40, #96725d);
border-top: 0.2625vmin solid #b99681;
border-bottom: 0.2625vmin solid #785846;
}
.c__back {
background-image: linear-gradient(to top, #674e40, #96725d);
border-top: 0.2625vmin solid #b99681;
border-bottom: 0.2625vmin solid #785846;
}
.c__left {
background-image: linear-gradient(to top, #574236, #96725d);
border-top: 0.2625vmin solid #b99681;
border-bottom: 0.2625vmin solid #785846;
}
.c__right {
background-color: #3e2e24;
}
.c__top {
background-color: #b08871;
background-image: linear-gradient(to bottom, #b5907b, #b08871, #ab8067);
border-top: 0.35vmin solid #d4bfb3;
}
.c__top::after {
content: "";
display: inline-block;
width: 100%;
height: 100%;
padding: 2.0125vmin 1.75vmin;
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #b08871 50%, #b08871 100%), linear-gradient(0deg, #1e1611 0%, #5e4537 50%, #b08871 50%, #b08871 100%);
background-size: 2.45vmin 1.8375vmin;
background-clip: content-box;
}
.c__bottom {
background-color: #4e392e;
}
.d {
width: 20.825vmin;
height: 13.65vmin;
position: absolute;
bottom: 0.35vmin;
left: 38.85vmin;
transform: translateZ(7.175vmin);
}
.d__front {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(11.9vmin);
}
.d__back {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.75vmin);
}
.d__right {
width: 13.65vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-13.65vmin) translateY(-1.75vmin);
}
.d__left {
width: 13.65vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.d__top {
width: 20.825vmin;
height: 13.65vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.d__bottom {
width: 20.825vmin;
height: 13.65vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20.825vmin);
}
.d__front {
background-image: linear-gradient(to top, #49423d, #736860);
border-top: 0.2625vmin solid #89817a;
border-bottom: 0.2625vmin solid #5d534b;
}
.d__back {
background-image: linear-gradient(to bottom, #615b56, #7c746e);
}
.d__left {
background-image: linear-gradient(to top, #574f49, #736860);
}
.d__right {
background-color: #39322e;
}
.d__top {
background-color: #7c746e;
background-image: linear-gradient(to bottom, #6e6762, #6e6762);
}
.d__bottom {
background-color: #39322e;
}
.d-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5.25vmin;
background-image: linear-gradient(12deg, transparent 50%, #554b45 50%);
transition: height 100ms linear;
}
.is-tape-close {
height: 0;
transition: height 100ms linear;
}
.e {
width: 20.825vmin;
height: 1.75vmin;
position: absolute;
bottom: 14vmin;
left: 38.85vmin;
transform: translateZ(7.175vmin);
}
.e__front {
width: 20.825vmin;
height: 1.3125vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(0.4375vmin);
}
.e__back {
width: 20.825vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.3125vmin);
}
.e__right {
width: 1.75vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-1.75vmin) translateY(-1.3125vmin);
}
.e__left {
width: 1.75vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.3125vmin);
}
.e__top {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: top left;
transform: translateZ(1.3125vmin);
}
.e__bottom {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20.825vmin);
}
.e__front {
background-color: #0e0d0c;
}
.e__back {
background-color: #473f39;
}
.e__left {
background-color: #0e0d0c;
}
.e__right {
background-color: #0e0d0c;
}
.e__top {
background-color: #554b45;
}
.e__bottom {
background-color: #0e0d0c;
}
.f {
width: 20.825vmin;
height: 1.75vmin;
position: absolute;
top: 0;
left: 38.85vmin;
transform: translateZ(7.175vmin);
}
.f__front {
width: 20.825vmin;
height: 1.3125vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(0.4375vmin);
}
.f__back {
width: 20.825vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.3125vmin);
}
.f__right {
width: 1.75vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-1.75vmin) translateY(-1.3125vmin);
}
.f__left {
width: 1.75vmin;
height: 1.3125vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.3125vmin);
}
.f__top {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: top left;
transform: translateZ(1.3125vmin);
}
.f__bottom {
width: 20.825vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20.825vmin);
}
.f__front {
background-color: #2b2622;
}
.f__back {
background-image: linear-gradient(to bottom, #635850, #473f39);
border-top: 0.35vmin solid #89817a;
}
.f__left {
background-color: #0e0d0c;
}
.f__right {
background-color: #0e0d0c;
}
.f__top {
background-color: #66605b;
}
.f__bottom {
background-color: #0e0d0c;
}
.g {
width: 19.25vmin;
height: 29.75vmin;
position: absolute;
bottom: 16.625vmin;
left: 39.55vmin;
transform: translateZ(7.175vmin);
}
.g__front {
width: 19.25vmin;
height: 0.875vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(28.875vmin);
}
.g__back {
width: 19.25vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-19.25vmin) translateY(-0.875vmin);
}
.g__right {
width: 29.75vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(19.25vmin) translateX(-29.75vmin) translateY(-0.875vmin);
}
.g__left {
width: 29.75vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.875vmin);
}
.g__top {
width: 19.25vmin;
height: 29.75vmin;
transform-origin: top left;
transform: translateZ(0.875vmin);
}
.g__bottom {
width: 19.25vmin;
height: 29.75vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-19.25vmin);
}
.g__front {
background-color: black;
}
.g__back {
background-color: black;
}
.g__left {
background-color: black;
}
.g__right {
background-color: black;
}
.g__top {
background-color: #4e4945;
background-image: linear-gradient(to bottom, #252321, #252321);
}
.g__top::before {
content: "TOTO - 1978";
position: absolute;
width: 22.75vmin;
height: 3.0625vmin;
transform-origin: top left;
transform: rotateZ(90deg);
top: 3.5vmin;
left: 7vmin;
font-size: 1.75vmin;
text-align: center;
line-height: 2;
background-color: #e7dbe5;
color: black;
}
.g__top::after {
content: "";
position: absolute;
top: 5.25vmin;
right: 3.5vmin;
width: 4.375vmin;
height: 4.375vmin;
border-radius: 50%;
background-color: #c1b3be;
box-shadow: 0 14vmin 0 #c1b3be;
}
.g__bottom {
background-color: black;
}
.h {
width: 20.825vmin;
height: 35vmin;
position: absolute;
bottom: 14vmin;
left: 38.85vmin;
transform-origin: top left;
transform: translateZ(8.4875vmin) rotateY(-12deg);
transition: transform 100ms linear;
}
.h__front {
width: 20.825vmin;
height: 0.4375vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(34.5625vmin);
}
.h__back {
width: 20.825vmin;
height: 0.4375vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-0.4375vmin);
}
.h__right {
width: 35vmin;
height: 0.4375vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-35vmin) translateY(-0.4375vmin);
}
.h__left {
width: 35vmin;
height: 0.4375vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4375vmin);
}
.h__top {
width: 20.825vmin;
height: 35vmin;
transform-origin: top left;
transform: translateZ(0.4375vmin);
}
.h__bottom {
width: 20.825vmin;
height: 35vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20.825vmin);
}
.h__front {
background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__back {
background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__left {
background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__right {
background-color: rgba(57, 50, 46, 0.8);
}
.h__top {
background-image: linear-gradient(to bottom, rgba(124, 116, 110, 0.85), rgba(110, 103, 98, 0.85));
border: 0.35vmin solid #817973;
overflow: hidden;
}
.h__top::after {
content: "";
position: absolute;
top: 20%;
width: 100%;
height: 8.75vmin;
transform-origin: top left;
transform: skewY(35deg);
background-color: rgba(231, 219, 229, 0.1);
filter: blur(1.3125vmin);
}
.h__bottom {
background-color: #39322e;
}
.is-radio-playing {
transform: translateZ(8.4875vmin) rotateY(0deg);
transition: transform 100ms linear;
}
.i {
width: 9.625vmin;
height: 13.65vmin;
position: absolute;
bottom: 0.35vmin;
left: 60.025vmin;
transform: translateZ(7.175vmin);
}
.i__front {
width: 9.625vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(11.9vmin);
}
.i__back {
width: 9.625vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-9.625vmin) translateY(-1.75vmin);
}
.i__right {
width: 13.65vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.625vmin) translateX(-13.65vmin) translateY(-1.75vmin);
}
.i__left {
width: 13.65vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.i__top {
width: 9.625vmin;
height: 13.65vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.i__bottom {
width: 9.625vmin;
height: 13.65vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-9.625vmin);
}
.i__front {
background-image: linear-gradient(to top, #705c6c, #d1c7cf);
border-top: 0.2625vmin solid #f1eaf0;
}
.i__back {
background-color: #5d4b59;
}
.i__left {
background-color: #5d4b59;
}
.i__right {
background-image: linear-gradient(to top, #796274, #c1b3be);
border-top: 0.2625vmin solid #f1eaf0;
}
.i__top {
background-color: #ddccda;
}
.i__bottom {
background-color: #aa97a6;
}
.j {
width: 4.8125vmin;
height: 31.5vmin;
position: absolute;
bottom: 14vmin;
left: 60.025vmin;
transform: translateZ(7.175vmin);
}
.j__front {
width: 4.8125vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(29.75vmin);
}
.j__back {
width: 4.8125vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-4.8125vmin) translateY(-1.75vmin);
}
.j__right {
width: 31.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.8125vmin) translateX(-31.5vmin) translateY(-1.75vmin);
}
.j__left {
width: 31.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.j__top {
width: 4.8125vmin;
height: 31.5vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.j__bottom {
width: 4.8125vmin;
height: 31.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-4.8125vmin);
}
.j__front {
background-image: #d1c7cf;
}
.j__back {
background-color: #e7dbe5;
}
.j__left {
background-color: #5d4b59;
}
.j__right {
background-color: #796274;
}
.j__top {
background-image: linear-gradient(to bottom, #e7dbe5, #ddccda);
}
.j__bottom {
background-color: #796274;
}
.k {
width: 9.625vmin;
height: 3.5vmin;
position: absolute;
top: 0.35vmin;
left: 60.025vmin;
transform: translateZ(7.175vmin);
}
.k__front {
width: 9.625vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(1.75vmin);
}
.k__back {
width: 9.625vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-9.625vmin) translateY(-1.75vmin);
}
.k__right {
width: 3.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.625vmin) translateX(-3.5vmin) translateY(-1.75vmin);
}
.k__left {
width: 3.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.k__top {
width: 9.625vmin;
height: 3.5vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.k__bottom {
width: 9.625vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-9.625vmin);
}
.k__front {
background-color: #5d4b59;
}
.k__back {
background-image: linear-gradient(to top, #be9eb9, #e7dbe5);
border-top: 0.35vmin solid #f1eaf0;
}
.k__left {
background-color: #5d4b59;
}
.k__right {
background-image: linear-gradient(to top, #796274, #c1b3be);
border-top: 0.35vmin solid #f1eaf0;
}
.k__top {
background-color: #e7dbe5;
}
.k__bottom {
background-color: #aa97a6;
}
.buttons {
position: absolute;
top: 4.1125vmin;
right: 0;
transform: translateZ(7.175vmin);
width: 4.9vmin;
height: 30.8vmin;
display: grid;
gap: 0.0875vmin;
}
.button {
position: relative;
width: 5.25vmin;
height: 4.55vmin;
transform-origin: top left;
transform: rotateY(-2deg);
}
.button:nth-of-type(1) .button-b .button-b__top {
background-color: #ffae75;
border: none;
cursor: pointer;
animation: button 750ms linear infinite alternate;
}
@keyframes button {
to {
background-color: #ff9042;
}
}
.button-a {
width: 3.9375vmin;
height: 4.725vmin;
position: absolute;
}
.button-a__front {
width: 3.9375vmin;
height: 1.225vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(3.5vmin);
}
.button-a__back {
width: 3.9375vmin;
height: 1.225vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-3.9375vmin) translateY(-1.225vmin);
}
.button-a__right {
width: 4.725vmin;
height: 1.225vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.9375vmin) translateX(-4.725vmin) translateY(-1.225vmin);
}
.button-a__left {
width: 4.725vmin;
height: 1.225vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.225vmin);
}
.button-a__top {
width: 3.9375vmin;
height: 4.725vmin;
transform-origin: top left;
transform: translateZ(1.225vmin);
}
.button-a__bottom {.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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