纯css实现音乐播放器的播放列表切换效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现音乐播放器的播放列表切换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap"); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 30px 10px; font-family: 'DM Sans', sans-serif; -webkit-transition: background .4s ease-in; transition: background .4s ease-in; background-color: #c394f8; } body.blue { background-color: #428aa6; } input[type=radio] { display: none; } .card { position: absolute; width: 60%; height: 100%; left: 0; right: 0; margin: auto; -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; cursor: pointer; } .container { width: 100%; max-width: 800px; max-height: 600px; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .cards { position: relative; width: 100%; height: 100%; margin-bottom: 20px; } img { width: 100%; height: 100%; border-radius: 10px; -o-object-fit: cover; object-fit: cover; } #item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 { -webkit-transform: translatex(-40%) scale(0.8); transform: translatex(-40%) scale(0.8); opacity: .4; z-index: 0; } #item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 { -webkit-transform: translatex(40%) scale(0.8); transform: translatex(40%) scale(0.8); opacity: .4; z-index: 0; } #item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 { -webkit-transform: translatex(0) scale(1); transform: translatex(0) scale(1); opacity: 1; z-index: 1; } #item-1:checked ~ .cards #song-1 img, #item-2:checked ~ .cards #song-2 img, #item-3:checked ~ .cards #song-3 img { box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47); } .player { background-color: #fff; border-radius: 8px; min-width: 320px; padding: 16px 10px; } .upper-part { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-bottom: 12px; height: 36px; overflow: hidden; } .play-icon { margin-right: 10px; } .song-info { width: calc(100% - 32px); display: block; } .song-info .title { color: #403d40; font-size: 14px; line-height: 24px; } .sub-line { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .subtitle, .time { font-size: 12px; line-height: 16px; color: #c6c5c6; } .time { font-size: 12px; line-height: 16px; color: #a5a5a5; font-weight: 500; margin-left: auto; } .progress-bar { height: 3px; width: 100%; background-color: #e9efff; border-radius: 2px; overflow: hidden; } .progress { display: block; position: relative; width: 60%; height: 100%; background-color: #2992dc; border-radius: 6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0