jquery+css实现老唱片留声机转动动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery+css实现老唱片留声机转动动画效果代码
代码标签: jquery css 老唱片 留声机 转动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> * { box-sizing: border-box; } .player { margin: 20px; padding: 20px; position: relative; width: 924px; height: 520px; background: #F13030; display: flex; justify-content: space-between; align-items: center; } .player .controls { width: calc(100% - 500px); height: 100%; display: flex; flex-wrap: wrap; } .player .controls .needleContainer, .player .controls .button, .player .controls .switches, .player .controls .empty { width: 50%; heighT: 50%; } .player .controls .button .dial-button { width: 100px; height: 100px; background: radial-gradient(black 5%, #090909 15%, #191919 60%); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.35); border-radius: 100px; display: flex; justify-content: center; align-items: center; color: white; } .player .controls .button .plugs { color: white; } .player .controls .button .plugs .aux { width: 20px; height: 20px; border-radius: 100%; background: #eee; box-shadow: 0px 0px 0px 3px #aaa; position: relative; } .player .controls .button .plugs .aux i { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 150%); } .player .controls .needleContainer { position: relative; display: flex; } .player .controls .needleContainer .switch { width: 10px; height: 50px; background: black; margin-left: 20px; margin-top: 10px; position: relative; } .player .controls .needleContainer .switch.active .switchToggleCont .swicthToggle { transform: translate(0, -15px) rotateX(0deg); } .player .controls .needleContainer .switch .switchToggleCont { position: absolute; left: 4px; perspective: 600px; } .player .controls .needleContainer .switch .switchToggleCont .swicthToggle { position: relative; transition: 0.35s ease-in-out; transform-style: preserve-3d; widtH: 2px; height: 40px; transform: translate(0, -15px) rotateX(180deg); transform-origin: bottom; animation: needleSwitch 5s ease-in-out infinite; } .player .controls .needleContainer .switch .switchToggleCont .swicthToggle .front, .player .controls .needleContainer .switch .switchToggleCont .swicthToggle .back { position: absolute; top: 0; left: 0; widtH: 2px; height: 40px; background: grey; } .player .controls .needleContainer .switch .switchToggleCont .swicthToggle .front { z-index: 2; } .player .controls .needleContainer .switch .switchToggleCont .swicthToggle .back { transform: rotateX(180deg); } .player .controls .needleContainer .ActualNeedle { position: relative; z-index: 5; } .player .controls .needleContainer .ActualNeedle .counter-weight { widtH: 50px; heighT: 50px; background: #ededed; box-shadow: 0.5px 0px 10px 4px #bbb, 0.5px 0px 0px 8px #ededed; border-radius: 50px; position: relative; transform: rotate(0deg); animation: needleRotate 5s ease-in-out infinite; perspective: 600px; } .player .controls .needleContainer .ActualNeedle .counter-weight .needle-arm { width: 15px; height: 350px; background: linear-gradient(90deg, #bbb, #ededed); position: absolute; top: 50px; left: 50%; transform: translate(-50%, 0%); box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.15); } .player .controls .needleContainer .ActualNeedle .counter-weight .needle-arm .needle { width: 25px; height: 40px; background: linear-gradient(90deg, #bbb, #eee); position: absolute; top: 100%; left: 50%; transform: translate(-50%, -40px); box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.35); } .player .controls .needleContainer .ActualNeedle .counter-weight .needle-arm .needle:after { content: ""; display: block; widtH: 30px; heighT: 5px; background: linear-gradient(-90deg, #bbb, #eee); position: absolute; left: 23px; transform-origin: left; transform: rotate(60deg); } .player .controls .needleContainer .ActualNeedle .counter-weight:after { content: ""; display: block; width: 25px; height: 50px; position: absolute; background: black; border-radius: 9px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .player .controls .switches .switchesCont { margin-left: 70px; } .player .controls .switches .switchesCont .auto-stop { margin-bottom: 10px; } .player .controls .switches .switchesCont .auto-stop .two-switch { position: relative; } .player .controls .switches .switchesCont .auto-stop .two-switch .labels { width: 12.5px; height: 33px; display: flex; flex-direction: column; align-items: center; background: #222; border: 2px solid black; } .player .controls .switches .switchesCont .auto-stop .two-switch .labels label { display: block; cursor: pointer; width: 100%; height: 50%; background: black repeating-linear-gradient(180deg, #333 10%, black 20%); transition: 0.35s ease-in-out; transform: translate(0, 0); } .player .controls .switches .switchesCont .auto-stop .two-switch .labels label.first { transform: translate(0, 0); } .player .controls .switches .switchesCont .auto-stop .two-switch .labels label.second { transform: translate(0, 100%); } .player .controls .switches .switchesCont .auto-stop .two-switch .option { position: absolute; top: 0; transform: translate(100%, 0); height: 33px; width: 15px; display: flex; flex-direction: column; align-items: center; } .player .controls .switches .switchesCont .auto-stop .two-switch .option p { font-size: 7.5px; font-weighT: bold; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .player .controls .switches .switchesCont .speed .three-switch { position: relative; } .player .controls .switches .switchesCont .speed .three-switch .labels { width: 12.5px; height: 66px; display: flex; flex-direction: column; align-items: center; background: #222; border: 2px solid black; } .player .controls .switches .switchesCont .speed .three-switch .labels label { display: block; cursor: pointer; width: 100%; height: 33%; background: black repeating-linear-gradient(180deg, #333 10%, black 20%); transition: 0.35s ease-in-out; transform: translate(0, 0); } .player .controls .switches .switchesCont .speed .three-switch .labels label.first { transform: translate(0, 0); } .player .controls .switches .switchesCont .speed .three-switch .labels label.second { transform: translate(0, 100%); } .player .controls .switches .switchesCont .speed .three-switch .labels label.third { transform: translate(0, 200%); } .player .controls .switches .switchesCont .speed .three-switch .speeds { position: absolute; top: 0; transform: translate(100%, 0); height: 66px; width: 12.5px; display: flex; flex-direction: column; align-items: center; } .player .controls .switches .switchesCont .speed .three-switch .speeds p { font-size: 7.5px; font-weighT: bold; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .player .disc { border-radius: 50%; background: black repeating-radial-gradient(circle, #090909, #090909 2px, black 2px, black 7.5px); padding: 10px; position: relative; width: 480px; heighT: 480px; animation: rotate 1.5s linear infinite; } .player .disc .center { widtH: 25%; heighT: 25%; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; } .player .disc .center:after { content: ""; widtH: 10px; heighT: 10px; border-radius: 50%; background: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .player .disc .center .top { widtH: 100%; heighT: 50%; border-top-left-radius: calc(480px / 2); border-top-right-radius: calc(480px / 2); display: flex; flex-direction: column; justify-content: center; align-items: center; } .player .disc .center .top .b-name { font-size: 10px; margin: 0; } .player .disc .center .top .side { font-size: 7.5px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0