纯css实现钢琴自动弹奏效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Piano keyboard</title> <style> /* Variables */ /* Reset */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; transform-style: preserve-3d; } /* Generic */ body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #B8ACFB; } .main { width: 800px; height: 600px; position: relative; } /*Base*/ .face-keyboard, .face-key { position: absolute; } .keyboard { position: relative; left: 27%; top: 33%; transform-origin: bottom left; transform: perspective(10000px) rotateY(-16deg) rotateX(66deg) rotateZ(37deg); /**/ /**/ } .keyboard__front { width: 800px; height: 220px; transform: rotateY(0deg) translateZ(15px); background-color: #3F3B43; } .keyboard__back { width: 800px; height: 220px; transform: rotateY(180deg) translateZ(15px); background-color: #151514; box-shadow: 0px 25px 0 #6E68C5, -40px 5px 0 #6E68C5, -40px 25px 0 #6E68C5; } .keyboard__right { width: 30px; height: 220px; transform: rotateY(90deg) translateZ(785px); background-image: linear-gradient(to right, #1A191C 50%, #151514 50%); } .keyboard__left { width: 30px; height: 220px; transform: rotateY(-90deg) translateZ(15px); background-image: linear-gradient(to right, #1A191C 50%, #151514 50%); } .keyboard__top { width: 800px; height: 30px; transform: rotateX(90deg) translateZ(15px); background-color: #3F3B43; } .keyboard__bottom { width: 800px; height: 30px; transform: rotateX(-90deg) translateZ(205px); background-image: linear-gradient(to bottom, #1A191C 50%, #151514 50%); } .keyboard__f-top { display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; width: 803px; height: 100px; margin-top: 10px; border-bottom: 20px solid #2A2631; transform: translateZ(5px) rotateX(-6deg) rotateZ(0.9deg); background-color: #3F3B43; } .keyboard__led { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 110px; height: 42px; background-color: #3CFBFE; border-top: 10px solid #151514; border-left: 10px solid #151514; box-shadow: inset 8px 8px 0 #00A6D1; } .keyboard__line { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 25px; padding: 0 1px; transform: rotateZ(180deg); overflow: hidden; } .keyboard__line:nth-of-type(1) { animation: line 1s ease-in alternate infinite 0.1s; } .keyboard__line:nth-of-type(2) { animation: line 1s ease-in alternate infinite 0.2s; } .keyboard__line:nth-of-type(3) { animation: line 1s ease-in alternate infinite 0.3s; } .keyboard__line:nth-of-type(4) { animation: line 1s ease-in alternate infinite 0.4s; } .keyboard__line:nth-of-type(5) { animation: line 1s ease-in alternate infinite 0.5s; } .keyboard__line:nth-of-type(6) { animation: line 1s ease-in alternate infinite 0.6s; } .keyboard__line:nth-of-type(7) { animation: line 1s ease-in alternate infinite 0.7s; } .keyboard__line:nth-of-type(8) { animation: line 1s ease-in alternate infinite 0.8s; } .keyboard__line:nth-of-type(9) { animation: line 1s ease-in alternate infinite 0.9s; } .keyboard__line:nth-of-type(10) { animation: line 1s ease-in alternate infinite 1s; } .keyboard__dot { height: 6px; width: 6px; flex-shrink: 0; background-color: rgba(21, 21, 20, 0.3); } .keyboard__buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 60px; height: 80px; margin: 0 40px; padding: 5px 0; } .keyboard__button { height: 20px; width: 20px; margin: 0 3px; box-shadow: 4px 4px 0 #151514; background-color: #3CFBFE; } .keyboard__button:nth-of-type(2) { animation: button-1 1s infinite; } .keyboard__button:nth-of-type(3) { animation: button-1 2s infinite reverse; } .keyboard__button:nth-of-type(5) { animation: button-2 2s infinite; } .keyboard__button:nth-of-type(6) { animation: button-3 1.5s infinite; } .keyboard__speaker { width: 70px; height: 70px; background-color: #1A191C; border-radius: 50%; margin-bottom: 5px; background-image: radial-gradient(#1A191C 3px, transparent 3px); background-color: #3F3B43; background-position: 0 0, 4px 4px; background-size: 10px 10px; } .keyboard__f-bottom { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; width: 630px; height: 120px; margin: 0 auto; padding-top: 1px; background-color: #FFFFFF; } .key { position: relative; width: 30px; z-index: 1000; } .key:nth-of-type(1) { animation: key-down-white 0.5s infinite alternate 0.0666666667s; } .key:nth-of-type(2) { animation: key-down-white 0.5s infinite alternate 0.1333333333s; } .key:nth-of-type(3) { animation: key-down-white 0.5s infinite alternate 0.2s; } .key:nth-of-type(4) { animation: key-down-white 0.5s infinite alternate 0.2666666667s; } .key:nth-of-type(5) { animation: key-down-white 0.5s infinite alternate 0.3333333333s; } .key:nth-of-type(6) { animation: key-down-white 0.5s infinite alternate 0.4s; } .key:nth-of-type(7) { animation: key-down-white 0.5s infinite alternate 0.4666666667s; } .key:nth-of-type(8) { animation: key-down-white 0.5s infinite alternate 0.5333333333s; } .key:nth-of-type(9) { animation: key-down-white 0.5s infinite alternate 0.6s; } .key:nth-of-type(10) { animation: key-down-white 0.5s infinite alternate 0.6666666667s; } .key:nth-of-type(11) { animation: key-down-white 0.5s infinite alternate 0.7333333333s; } .key:nth-of-type(12) { animation: key-down-white 0.5s infinite alternate 0.8s; } .key:nth-of-type(13) { animation: key-down-white 0.5s infinite alternate 0.8666666667s; } .key:nth-of-type(14) { animation: key-down-white 0.5s infinite alternate 0.9333333333s; } .key:nth-of-type(15) { animation: key-down-white 0.5s infinite alternate 1s; } .key:nth-of-type(16) { animation: key-down-white 0.5s infinite alternate 1.0666666667s; } .key:nth-of-type(17) { animation: key-down-white 0.5s infinite alternate 1.1333333333s; } .key:nth-of-type(18) { animation: key-down-white 0.5s infinite alternate 1.2s; } .key:nth-of-type(19) { animation: key-down-white 0.5s infinite alternate 1.2666666667s; } .key:nth-of-type(20) { animation: key-down-white 0.5s infinite alternate 1.3333333333s; } .key:nth-of-type(21) { animation: key-down-white 0.5s infinite alternate 1.4s; } .key__front { width: 30px; height: 120px; transform: rotateY(0deg) translateZ(2px); background-color: #FFFFFF; } .key__front-1 { animation: key-down-color 0.5s infinite alternate 0.0666666667s; } .key__front-2 { animation: key-down-color 0.5s infinite alternate 0.1333333333s; } .key__front-3 { animation: key-down-color 0.5s infinite alternate 0.2s; } .key__front-4 { animation: key-down-color 0.5s infinite alternate 0.2666666667s; } .key__front-5 { animation: key-down-color 0.5s infinite alternate 0.3333333333s; } .key__front-6 { animation: key-down-color 0.5s infinite alternate 0.4s; } .key__front-7 { animation: key-down-color 0.5s infinite alternate 0.4666666667s; } .key__front-8 { animation: key-down-color 0.5s infinite alternate 0.5333333333s; } .key__front-9 { animation: key-down-color 0.5s infinite alternate 0.6s; } .key__front-10 { animation: key-down-color 0.5s infinite alternate 0.6666666667s; } .key__front-11 { animation: key-down-color 0.5s infinite alternate 0.7333333333s; } .key__front-12 { animation: key-down-color 0.5s infinite alternate 0.8s; } .key__front-13 { animation: key-down-color 0.5s infinite alternate 0.8666666667s; } .key__front-14 { animation: key-down-color 0.5s infinite alternate 0.9333333333s; } .key__front-15 { animation: key-down-color 0.5s infinite alternate 1s; } .key__front-16 { animation: key-down-color 0.5s infinite alternate 1.0666666667s; } .key__front-17 { animation: key-down-color 0.5s infinite alternate 1.1333333333s; } .key__front-18 { animation: key-down-color 0.5s infinite alternate 1.2s; } .key__front-19 { animation: key-down-color 0.5s infinite alternate 1.2666666667s; } .key__front-20 { animation: key-down-color 0.5s infinite alternate 1.3333333333s; } .key__front-21 { animation: key-down-color 0.5s infinite alternate 1.4s; } .key__back { width: 30px; height: 120px; transform: rotateY(180deg) translateZ(2px); background-color: #B2B3D2; } .key__right { width: 4px; height: 120px; transform: rotateY(90deg) translateZ(28px); background-color: #B2B3D2; } .key__left { width: 4px; height: 120px; transform: rotateY(-90deg) translateZ(2px); background-color: #FFFFFF; } .key__top { width: 30px; height: 4px; transform: rotateX(90deg) translateZ(2px); background-color: #B2B3D2; } .key__bottom { width: 30px; height: 4px; transform: rotateX(-90deg) translateZ(118px); background-color: #B2B3D2; border-left: 1px solid #2A2631; } .key--black { position: absolute; transform: translateZ(8px); border-bottom: none; z-index: 2000; } .key--black-1 { left: 15px; } .key--black-2 { left: 50px; } .key--black-3 { left: 110px; } .key--black-4 { left: 140px; } .key--black-5 { left: 170px; } .key--black-6 { left: 230px; } .key--black-7 { left: 260px; } .key--black-8 { left: 320px; } .key--black-9 { left: 350px; } .key--black-10 { left: 380px; } .key--black-11 { left: 440px; } .key--black-12 { left: 470px; } .key--black-13 { left: 530px; } .key--black-14 { left: 560px; } .key--black-1 { animation: key-down-black 0.5s infinite alternate 0.0666666667s; } .key--black-2 { animation: key-down-black 0.5s infinite alternate 0.1333333333s; } .key--black-3 { animation: key-down-black 0.5s infinite alternate 0.2s; } .key--black-4 { animation: key-down-black 0.5s infinite alternate 0.2666666667s; } .key--black-5 { animation: key-down-black 0.5s infinite alternate 0.3333333333s; } .key--black-6 { animation: key-down-black 0.5s infinite alternate 0.4s; } .key--black-7 { animation: key-down-black 0.5s infinite alternate 0.4666666667s; } .key--black-8 { animation: key-down-black 0.5s infinite alternate 0.5333333333s; } .key--black-9 { animation: key-down-black 0.5s infinite alternate 0.6s; } .key--black-10 { animation: key-down-black 0.5s infinite alternate 0.6666666667s; } .key--black-11 { animation: key-down-black 0.5s infinite alternate 0.7333333333s; } .key--black-12 { animation: key-down-black 0.5s infinite alternate 0.8s; } .key--black-13 { animation: key-down-black 0.5s infinite alternate 0.8666666667s; } .key--black-14 { animation: key-down-black 0.5s infinite alternate 0.9333333333s; } .key--black-15 { animation: key-down-black 0.5s infinite alternate 1s; } .key--black .key__front { width: 20px; height: 70px; transform: rotateY(0deg) translateZ(3px); background-color: #3F3B43; border-right: none; } .key--black .key__back { width: 20px; height: 70px; transform: rotateY(180deg) translateZ(3px); background-color: #2A2631; } .key--black .key__right { width: 6px; height: 70px; transform: rotateY(90deg) translateZ(16px); background-color: #1A191C; border-bottom: none; } .key--black .key__left { width: 6px; height: 70px; transform: rotateY(-90deg) translateZ(3px); background-color: #3F3B43; } .key--black .key__top { width: 20px; height: 6px; transform: rotateX(90deg) translateZ(3px); background-color: #3F3B43; } .key--black .key__bottom { width: 20px; height: 6px; transform: rotateX(-90deg) translateZ(67px); background-color: #1A191C; } /**/ @keyframes key-down-color { 0% { background-color: #88fdfe; } 30%, 100% { background-color: #FFFFFF; } } @keyframes key-down-white { 0% { transform: translateZ(0px) rotateX(-1deg); transform-origin: center; } 30%, 100% { transform: translateZ(3px) rotateX(0deg); transform-origin: center; } } @keyframes key-down-black { 0% { transform-origin: center; transform: translateZ(9px); } 30%, 100% { transform: translateZ(8px); transform-origin: center; } } @keyframes line { 0%, 100% { height: 60%; } 24% { height: 80%; } 25%, 30% { height: 85%; } 55%, 60% { height: 65%; } 61%, 65% { height: 90%; } 80%, 82% { height: 50%; } 83%, 90% { height: 40%; } 95% { height: 40%; } } @keyframes button-1 { 0% { background-color: #3CFBFE; } 50%, 100% { background-color: #B8ACFB; } } @keyframes button-2 { 0%, 40% { background-color: #FFA862; } 50%, 100% { background-color: #3CFBFE; } } @keyframes button-3 { 0%, 40% { background-color: #00D27F; } 50%, 100% { background-color: #3CFBFE; } } </style> </head> <body translate="no"> <div class="main"> <div class="keyboard"> <div class="keyboard__front face-keyboard"> <div class="keyboard__f-top"> <div class="keyboard__speaker"></div> <div class="keyboard__buttons"> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> </div> <div class="keyboard__led"> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> <div class="keyboard__dot"></div> </div> <div class="keyboard__line"> <div class="keyboard_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0