css实现可开关的木质节拍器动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现可开关的木质节拍器动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100vh; background-color: #ffffdd; font-family: helvetica; } .box { background-color: #541515; height: 510px; width: 300px; border-radius: 5px; box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.7); } .box { position: relative; } .box::before, .box::after { content: ""; position: absolute; top: -10%; left: -120px; background-color: #ffffdd; height: 110%; width: 120px; transition: all 0.3s ease-in-out; transform-origin: bottom right; transform: rotateZ(13deg); } .box::after { transform-origin: bottom left; transform: rotateZ(-13deg); left: 100%; } .box { perspective: 100px; } .box .back { background-color: #170606; position: absolute; top: calc(50% - 613px); left: 53px; height: 670px; width: 195px; transform-origin: bottom; transform: rotateX(15deg); perspective: 300px; overflow: hidden; box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.7); } .box .back .rule { background-color: white; position: absolute; top: 0px; left: calc(50% - 15px); height: 100%; width: 30px; transform-origin: bottom; transform: rotateX(-15deg); box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.7); } .rule .mark { position: absolute; top: 50%; left: 0; height: 4px; width: 100%; background-image: linear-gradient(gray, white); } .rule .mark:nth-child(1) { top: 25%; } .rule .mark:nth-child(2) { top: 30%; } .rule .mark:nth-child(3) { top: 40%; } .rule .mark:nth-child(4) { top: 50%; } .rule .mark:nth-child(5) { top: 60%; } .rule .mark:nth-child(6) { top: 70%; } .rule .mark:nth-child(7) { top: 80%; } .box .labels { position: absolute; top: 42px; left: calc(50% - 73px); width: 150px; height: 200px; } .box .labels label { position: absolute; left: calc(50% + 15px); color: white; font-size: 10px; user-select: none; } .box .labels label:nth-child(1) { top: 2px; } .box .labels label:nth-child(2) { top: 15px; } .box .labels label:nth-child(3) { top: 41px; } .box .labels label:nth-child(4) { top: 70px; } .box .labels label:nth-child(5) { top: 102px; } .box .labels label:nth-child(6) { top: 136px; } .box .labels label:nth-child(7) { top: 175px; } .cover { position: absolute; bottom: 7px; left: 7px; width: 285px; height: 190px; z-index: 6; overflow: hidden; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.7); } .cover .bg { height: 200%; width: 150%; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png"); background-position: center; transform: rotateZ(90deg) translateY(100px); } .cover::before, .cover::after { content: ""; position: absolute; bottom: 0; left: -5px; height: 200px; width: 7px; background-color: #541515; transform-origin: bottom right; transform: rotateZ(13deg); z-index: 7; } .cover::after { left: 100%; transform-origin: bottom left; transform: rotateZ(-13deg); } .cover .switch { position: absolute; top: 100px; left: 50px; height: 60px; width: 30px; border-radius: 3px; background-color: #541515; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 100px; } .cover .switch .on, .cover .switch .off { margin-left: 1px; height: 25px; width: 25px; background-color: brown; display: flex; justify-content: center; align-items: center; transition: all 0.1s ease-in; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.7); color: white; transform: rotateX(0deg); font-size: 12px; cursor: pointer; user-select: none; } .cover .switch .on { transform-origin: bottom; background-color: #7c2020; transform: rotateX(-35deg); } .cover .switch .off { background-color: brown; transform-origin: top; transform: rotateX(0deg); } .cover .switch.on .on { background-color: brown; transform: rotateX(0deg); } .cover .switch.on .off { background-color: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0