css布局实现盒式录音带播放音乐效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现盒式录音带播放音乐效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; } button { border: none; } body { background-color: #f3c74b; } section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction:column; } p{ font-size: 14px; margin-top: 30px; color:#612700; font-weight:bold; } a{ color:#C80312; text-decoration:none; } .wrapper { min-width: 290px; height: 320px; background: rgb(19, 19, 27); background: linear-gradient( 0deg, rgba(19, 19, 27, 1) 0%, rgba(40, 41, 46, 1) 100% ); border-radius: 17px; display: flex; align-items: center; flex-direction: column; position: relative; overflow: hidden; padding: 5px 15px; } .polka-dot { width: 180px; height: 23px; background-image: radial-gradient(circle, #161616 35%, transparent 9%), radial-gradient(circle, #161616 35%, transparent 9%); background-size: 10px 8px; background-position: 0 0, 0px 16px; } .player-wrapper { margin-top: 10px; width: 260px; height: 195px; background-color: #1d1e22; border-radius: 12px; padding: 5px; } .player-container { background: rgb(36, 39, 43); background: linear-gradient( 128deg, rgba(36, 39, 43, 1) 0%, rgba(49, 50, 58, 1) 100% ); height: 184px; height: 100%; border-radius: 8px; padding: 12px; position: relative; } .screws { width: 9px; height: 9px; position: absolute; top: 4px; left: 4px; border: 1px solid #1a1b1f; border-radius: 50%; } .screws:before { content: ""; position: absolute; left: 1px; top: 3px; width: 5px; height: 1px; background-color: #1a1b1f; } .screws:after { content: ""; position: absolute; left: 3px; top: 1px; width: 1px; height: 5px; background-color: #1a1b1f; } .player-container .screws.two { right: 4px; left: inherit; } .player-container .screws.three { bottom: 4px; top: inherit; } .player-container .screws.four { right: 4px; left: inherit; bottom: 4px; top: inherit; } .base { width: 167px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 38px; clip-path: polygon(7% 0%, 93% 0%, 100% 100%, 0% 100%); box-shadow: inset 0px 2px 4px #000; overflow: hidden; } .base:before { content: ""; position: absolute; left: -2px; bottom: 0; background-color: #000; width: 10px; height: 40px; transform: rotate(17deg); filter: blur(2px); } .base:after { content: ""; position: absolute; right: -6px; bottom: -1px; background-color: #ffffff70; width: 11px; height: 39px; transform: rotate(343deg); filter: blur(1px); } .bottom-base { position: absolute; height: 13px; width: 47px; box-shadow: inset 1px 2px 3px #0f0f13; bottom: 0; left: 50%; transform: translateX(-50%); } .player { background-color: #1b1b20; padding: 5px; height: 127px; position: relative; box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.28); } .player:before { content: ""; position: absolute; left: -11px; top: -5px; width: 20px; height: 10px; background-color: #25282c; transform: rotate(-45deg); } .player:after { content: ""; position: absolute; right: -11px; top: -5px; width: 20px; height: 10px; background-color: #2d2e35; transform: rotate(227deg); } .cassete { height: 63px; background-color: #333338; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.18); border-radius: 2px; transform: translateY(38px); display: flex; justify-content: center; align-items: center; } .rotator-container { background-color: #0f1010; width: 103px; height: 43px; position: relative; } .rotator-container:before { content: ""; position: absolute; top: -6px; left: -26px; background-color: rgba(187, 89, 85, 0.25); width: 56px; height: 56px; border-radius: 50%; } .left-cog { width: 32px; height: 32px; transform: translate(-14px, 6px); position: absolute; top: 0; left: -5px; } .right-cog { width: 32px; height: 32px; transform: translate(-14px, 6px); position: absolute; top: 0; right: -25px; } .right-cog:before { content: ""; position: absolute; top: -30px; left: -24px; width: 92px !important; height: 92px !important; background-color: rgba(187, 89, 85, 0.25); border-radius: 50%; } .chil1 { background-color: #a8a8a8; width: 42px; height: 42px; position: absolute; top: 50%; left: 0; z-index: 1; transform: translateY(-50%); border-radius: 50%; } .chil1:before { content: ""; position: absolute; top: 50%; left: 50%; width: 37px; height: 37px; background-color: #000; z-index: 1; border-radius: 50%; transform: translate(-50%, -50%); } .chil2 { background-color: #a8a8a8; width: 30px; height: 30px; position: absolute; top: 50%; left: 6px; z-index: 1; transform: translateY(-50%); border-radius: 50%; } .cog-img { position: absolute; top: 2px; left: 7px; z-index: 2; width: 28px; height: 28px; } .controls-container { width: 260px; height: 71px; background: rgb(28, 28, 33); background: linear-gradient(270deg, rgb(16 16 21) 0%, rgb(21 22 27) 100%); position: absolute; bottom: 0; left: 50%; border-top-left-radius: 12px; border-top-right-radius: 12px; transform: translateX(-50%); box-shadow: inse.........完整代码请登录后点击上方下载按钮下载查看
网友评论0