js+css实现老式唱碟播放器ui交互效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现老式唱碟播放器ui交互效果代码,可以加入声音播放停止功能
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* content */ #app { height: 100%; position: relative; } .song__bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(//repo.bfw.wiki/bfwrepo/image/5fcd70565eba5.png) no-repeat center; background-size: auto 100%; filter: blur(8px); } .song__bg::before { content: " "; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); } .song-wrap { padding-top: 70px; } .song-disc { position: relative; width: 296px; height: 296px; margin: 0 auto; } .song-disc__bg { position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: url(//repo.bfw.wiki/bfwrepo/icon/66f36e8a35b74.png) no-repeat center; background-size: contain; } .song-disc__cover { position: absolute; z-index: 1; width: 184px; height: 184px; left: 50%; top: 50%; margin-left: -92px; margin-top: -92px; } .song-img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; font-size: 0; } .u-img { width: 100%; } .song-img.play { animation: circle 10s linear infinite; } @keyframes circle { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .play-btn { width: 56px; height: 56px; position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(//repo.bfw.wiki/bfwrepo/icon/66f36e79aadc2.png) no-repeat; background-size: contain; } .play-btn.play { display: none; } .song-needle { position: absolute; z-index: 3; top: -70px; width: 96px; height: 137px; left: 133px; background: url(//repo.bfw.wiki/bfwrepo/icon/66f36fdbdd68c.png) no-repeat; background-size: contain; transform: rotate(-30deg); transform-origin: left top; transition: transform .5s; } .song-needle.play { transform: rotate(0); } </style> </head> <body> <div id="app"> <div class="song__bg"></div> <div class="song-wrap"> <div class="song-disc"> <div class="song-disc__bg"></div> <div class="song-disc__cover"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0