音乐播放器ui布局效果
代码语言:html
所属分类:布局界面
代码描述:音乐播放器ui布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* ROBOTO */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500); body { background: url('http://repo.bfw.wiki/bfwrepo/image/5ef9f88e98ba9.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* IE ...BECAUSE FY THATS WHY */ filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; } #overlay { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; z-index: -1; } header { width: 100%; margin: 0 auto; } #menu-bar { cursor: pointer; /* not a real menu */ margin-top: 40px; margin-left: 40px; width: 40px; } #menu-bar span { width: 100%; height: 4px; float: left; margin-bottom: 6px; background: #FFF; } #song-info { width: 400px; margin: 0 auto; text-align: center; } #song-info h1 { font-family: Roboto; font-weight: 500; color: #FFF; font-size: 46px; } #song-info p { font-family: Roboto; font-weight: 400; color: #FFF; font-size: 26px; margin-top: -30px; } #search { float: right; width: 80px; position: absolute; top: 40px; right: 40px; color: #FFF; cursor: pointer; } #content { position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; height: 120px; background: #FFF; -webkit-box-shadow: 0px -12px 80px -5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px -12px 80px -5px rgba(0, 0, 0, 0.75); box-shadow: 0px -12px 80px -5px rgba(0, 0, 0, 0.75); } /* CLEAN THAT BITCH */ input[type=range] { -webkit-appearance: none; width: 100%; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } #content #range { width: 100%; margin-top: -10px; } /* RESTYLE THAT BITCH */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50px; background: #EF6C00; cursor: pointer; margin-top: -14px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } input[type=range]::-webkit-slider-thumb:active { height: 38px; width: 38px; margin-top: -18px; } input[type=range]::-moz-slider-thumb:active { height: 38px; width: 38px; margin-top: -18px; } input[type=range]::-ms-slider-thumb:active { height: 38px; width: 38px; margin-top: -18px; } input[type=range]::-moz-range-thumb { height: 28px; width: 28px; border-radius: 50px; background: #EF6C00; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } input[type=range]::-ms-thumb { height: 28px; width: 28px; border-radius: 50px; background: #EF6C00; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #EF6C00; } input[type=range].........完整代码请登录后点击上方下载按钮下载查看
网友评论0