css布局实现一个老式留声机播放音乐效果
代码语言:html
所属分类:动画
代码描述:css布局实现一个老式留声机播放音乐效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } body { position: absolute; margin: 0; padding: 0; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } main { position: relative; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5f14d32694ad3.png"); height: 540px; width: 675px; border-radius: 6px; background-size: cover; box-shadow: -5px 5px 22px 2px rgba(0, 0, 0, 0.75); } .record-player { position: absolute; top: 40px; left: 40px; box-shadow: -6px 6px 9px #000000de; border-radius: 50%; z-index: 0; } .vinyl { display: flex; align-items: center; justify-content: center; } .vinyl-circle { position: relative; width: 468px; height: 468px; display: flex; align-items: center; justify-content: center; background: repeating-radial-gradient( circle, #000, #000 4px, #131313 4px, #131313 6px ); border-radius: 50%; } .vinyl-circle::before { content: ""; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90"); background-size: 150px; top: 152px; left: 152px; border-radius: 50%; width: 165px; height: 165px; z-index: 0; position: absolute; border: 10px black solid; } .vinyl-glare { position: absolute; width: 468px; height: 468px; background: radial-gradient( farthest-side ellipse at top, #ffffff35, transparent 50% ), radial-gradient(farthest-side ellipse at bottom, #ffffff35, transparent 50%); border-radius: 50%; transform: rotate(45deg); } .vinyl-center { position: absolute; width: 18px; height: 18px; background: #ababab; box-shadow: inset -1px 1px 2px 0px #dfdfdf, -3px 3px 4px -1px #000000; border-radius: 50%; } .disc-underTonarm { width: 160px; height: 160px; position: absolute; top: -10px; left: 405px; z-index: -1; border-radius: 50%; border: 3px solid rgb(0, 0, 0, 0.85); box-shadow: inset 0px 0px 2px 2px #6b6b6b, inset 0px 0px 3px 3px #8a8a8a, inset 0px 2px 2px 4px #fff; } .disc-overTonarm { width: 70px; height: 70px; position: absolute; top: 33px; left: 452px; z-index: 10; border-radius: 50%; transform: rotate(30deg); box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5); } .disc-overTonarm:before { content: ""; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 100% ); } #hidden { background: none; box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.5); z-index: 5; } .stick { position: absolute; left: 286px; top: -8px; z-index: 2; transform-origin: 200px 70px; } .stick-stop1, .stick-stop3 { stop-color: grey; } .stick-stop2 { stop-color: white; } .disc-underTonarm, .disc-overTonarm, .btn-play { background: conic-gradient( #cdcdcd, #bcbcbc, #c4c4c4, #e6e6e6, #dddddd, #bfbfbf, #e3e3e3, #d2d2d2, #c0c0c0, #e5e5e5, #d6d6d6, #bdbdbd, #e3e3e3, #cdcdcd, #bcbcbc ); } #btn-play { visibility: hidden; } .btn-play { position: absolute; width: 70px; height: 70px; top: 395px; left: 530px; border: solid 3px rgba(0, 0, 0, 0.75); border-radius: 60px; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.6) 15%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 100% ), repeating-radial-gradient( circle at 50%, #96969629, #9696964a 1px, #9696962e, #9696964a 1px ), conic-gradient( #d6d6d6, #b5b5b5, #cecece, #cacaca, #e3e3e3, #cacaca, #cecece, #b5b5b5, #d6d6d6, #b5b5b5, #cecece, #cacaca, #e3e3e3, #cacaca, #cecece, #b5b5b5, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0