css布局绘制一个音乐播放器效果代码
代码语言:html
所属分类:布局界面
代码描述: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/all.min.css"> <style> body { align-items: center; background-color: #fff8e7; color: #545454; display: flex; height: 100vh; justify-content: center; } .media-controls { background: #fffaee; border: 1px solid #fff3eb; border-radius: 24px; box-shadow: -2px 2px 2px rgba(255, 195, 153, 0.25), 2px -2px 2px rgba(255, 255, 255, 0.25), -4px 4px 4px rgba(255, 195, 153, 0.2), 4px -4px 4px rgba(255, 255, 255, 0.2), -8px 8px 8px rgba(255, 195, 153, 0.15), 8px -8px 8px rgba(255, 255, 255, 0.15), -16px 16px 16px rgba(255, 195, 153, 0.1), 16px -16px 16px rgba(255, 255, 255, 0.1), -24px 24px 24px rgba(255, 195, 153, 0.05), 24px -24px 24px rgba(255, 255, 255, 0.05); color: #565656; display: flex; flex-direction: column; padding: 24px; } .media-buttons { display: flex; flex-wrap: nowrap; } .media-button { background-color: transparent; border: none; align-items: center; border-radius: 100%; display: flex; flex-direction: column; justify-content: center; padding: 12px; text-align: center; } .button-icons { background-color: #ffc399; border-radius: 100%; margin-bottom: 4px; margin-top: auto; padding: 16px; } .back-button .button-icons, .skip-button .button-icons { background-color: transparent; color: #919191; } .rewind-button .button-icons, .fast-forward-button .button-icons { background: linear-gradient(to bottom left, #fff8e7, #ffe1cc); color: #838383; } .play-button .button-icons { background: linear-gradient(to bottom left, #ffffff, #fff8e7); border: 1px solid #fff3eb; box-shadow: -1px 1px 1px rgba(255, 195, 153, 0.25), 1px -1px 1px rgba(255, 255, 255, 0.25), -2px 2px 2px rgba(255, 195, 153, 0.2), 2px -2px 2px rgba(255, 255, 255, 0.2), -4px 4px 4px rgba(255, 195, 153, 0.15), 4px -4px 4px rgba(255, 255, 255, 0.15), -8px 8px 8px rgba(255, 195, 153, 0.1), 8px -8px 8px rgba(255, 255, 255, 0.1), -16px 16px 16px rgba(255, 195, 153, 0.05), 16px -16px 16px rgba(255, 255, 255, 0.05); color: #f26600; padding: 24px; } .button-text { margin-top: auto; } .media-progress { display: flex; flex-wrap: wrap; justify-content: space-between; } .progress-bar-wrapper { background-color: transparent; border-radius: 12px; box-shadow: inset -1px 1px 1px rgba(255, 195, 153, 0.25), inset 1px -1px 1px rgb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0