木琴弹奏效果
代码语言:html
所属分类:多媒体
代码描述:木琴弹奏效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } :root { --desired-size: 40; --coefficient: 1vmin; --size: calc(var(--desired-size) * var(--coefficient)); } body { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); height: 100vh; display: grid; place-items: center; margin: 0; font-family: sans-serif; } main { margin: 0; } .xylophone { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; position: relative; height: calc(1.2 * var(--size)); width: calc(2.5 * var(--size)); margin: 0 auto; } .xylophone > .note:before, .xylophone > .note:after, .xylophone:before, .xylophone:after{ position: absolute; content: ''; } .xylophone:before, .xylophone:after { height: 30px; z-index: -1; width: 100%; left: 0; background-image: -webkit-gradient(linear, left top, right top, from(#434343), to(black)); background-image: linear-gradient(to right, #434343 0%, black 100%); } .xylophone:before { top: 10%; -webkit-transform: rotate(4deg); transform: rotate(4deg); } .xylophone:after { bottom: 10%; -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } .xylophone .note { --primary-color: hsla(var(--h, 0), 100%, 50%, 1); --offset: calc(var(--i, 0) * 4%); position: relative; height: calc(110% - var(--offset)); width: 10%; background: var(--primary-color); border-radius: 5px; -webkit-transform: translateY(-15px); transform: translateY(-15px); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); -webkit-transition: all 1s ease; transition: all 1s ease; } .xylophone > .note:before, .xylophone > .note:after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 15px; width: 15px; border-radius: 50%; background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .xylophone > .note:before { top: 10px; } .xylophone > .note:after { bottom: 10px; } .xylophone kbd { height: 100%; width: 100%; color: #FFF; font-size: 2em; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-shadow: 2px 2px #000; -webkit-transition: border 0.2s ease; transition: border 0.2s ease; } .xylophone kbd:hover, .xylophone kbd:focus { border: 3px solid #ffc600; cursor: pointer; } .xylophone > .note.playing { border-color: #ffc600; box-shadow: 10px -5px 2rem #FFC600; } main p { text-align: center; font-size: 1.5rem; position: absolute; width: 100vw; top: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } main p.license { font-size: 0.7rem; top: 95%; font-weight: grey; opacity: 0.7; } main span { font-style: italic; font-weight: light; font-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0