502 lines
8.0 KiB
CSS
502 lines
8.0 KiB
CSS
/*-----------------------------------------*/
|
||
/****************公用样式*******************/
|
||
/*-----------------------------------------*/
|
||
.clear-both::after {
|
||
clear: both;
|
||
content: ".";
|
||
display: block;
|
||
visibility: hidden;
|
||
height: 0;
|
||
}
|
||
|
||
.lf {
|
||
float: left;
|
||
}
|
||
|
||
.rt {
|
||
float: right;
|
||
}
|
||
|
||
.transition {
|
||
-webkit-transition: all .5s ease;
|
||
-o-transition: all .5s ease;
|
||
-moz-transition: all .5s ease;
|
||
transition: all .5s ease;
|
||
}
|
||
|
||
.transform-scale {
|
||
-webkit-transform: scale(1);
|
||
-moz-transform: scale(1);
|
||
-ms-transform: scale(1);
|
||
transform: scale(1);
|
||
}
|
||
|
||
.hover-transform-scale {
|
||
-webkit-transform: scale(1.05);
|
||
-moz-transform: scale(1.05);
|
||
-ms-transform: scale(1.05);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.ellipsis {
|
||
display: block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.text-ban {
|
||
-moz-user-select: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
-khtml-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.track-list {
|
||
scrollbar-face-color: #c7c7c7;
|
||
scrollbar-highlight-color: #c7c7c7;
|
||
scrollbar-3dlight-color: #c7c7c7;
|
||
scrollbar-darkshadow-color: #c7c7c7;
|
||
scrollbar-Shadow-color: #c7c7c7;
|
||
scrollbar-arrow-color: #c7c7c7;
|
||
scrollbar-track-color: #ebebeb;
|
||
}
|
||
|
||
.track-list::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 9px;
|
||
}
|
||
|
||
.track-list::-webkit-scrollbar-button:end:increment,
|
||
.track-list::-webkit-scrollbar-button:start:decrement {
|
||
display: block;
|
||
height: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.track-list::-webkit-scrollbar-track-piece {
|
||
-webkit-border-radius: 0;
|
||
-webkit-border-bottom-right-radius: 4px;
|
||
-webkit-border-bottom-left-radius: 4px;
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.track-list::-webkit-scrollbar-thumb:vertical {
|
||
height: 50px;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
-webkit-border-radius: 4px;
|
||
}
|
||
|
||
.track-list::-webkit-scrollbar-thumb:horizontal {
|
||
width: 50px;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
-webkit-border-radius: 4px;
|
||
}
|
||
|
||
/*-----------------------------------------*/
|
||
/****************元素样式*******************/
|
||
/*-----------------------------------------*/
|
||
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
|
||
html {
|
||
color: #fff;
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
background: #eff3f5;
|
||
background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
|
||
/* Safari 5.1 - 6.0 */
|
||
background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
|
||
/* Opera 11.1 - 12.0 */
|
||
background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
|
||
/* Firefox 3.6 - 15 */
|
||
background: linear-gradient(to right, #f6ad36, #cf5a5d);
|
||
/* 标准的语法 */
|
||
}
|
||
|
||
/** 清除内外边距 **/
|
||
body,
|
||
div,
|
||
dl,
|
||
dt,
|
||
dd,
|
||
ul,
|
||
ol,
|
||
li,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
pre,
|
||
code,
|
||
form,
|
||
fieldset,
|
||
legend,
|
||
input,
|
||
textarea,
|
||
p,
|
||
blockquote,
|
||
th,
|
||
td,
|
||
hr,
|
||
button,
|
||
article,
|
||
aside,
|
||
details,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
menu,
|
||
nav,
|
||
section {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
|
||
article,
|
||
aside,
|
||
details,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
menu,
|
||
nav,
|
||
section {
|
||
display: block;
|
||
}
|
||
|
||
/* HTML5 媒体文件跟 img 保持一致 */
|
||
audio,
|
||
canvas,
|
||
video {
|
||
display: inline-block;
|
||
*display: inline;
|
||
*zoom: 1;
|
||
}
|
||
|
||
/* 要注意表单元素并不继承父级 font 的问题 */
|
||
input,
|
||
select,
|
||
textarea {
|
||
font-size: 100%;
|
||
}
|
||
|
||
/* 去掉各 table cell 的边距并让其边重合 */
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
/* IE bug fixed: th 不继承 text-align */
|
||
th {
|
||
text-align: inherit;
|
||
}
|
||
|
||
/* 去除默认边框 */
|
||
fieldset,
|
||
img {
|
||
border: 0;
|
||
}
|
||
|
||
/* ie6 7 8(q) bug 显示为行内表现 */
|
||
iframe {
|
||
display: block;
|
||
}
|
||
|
||
/* 去掉 firefox 下此元素的边框 */
|
||
abbr,
|
||
acronym {
|
||
border: 0;
|
||
font-variant: normal;
|
||
}
|
||
|
||
/* 一致的 del 样式 */
|
||
del {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
i {
|
||
font-style: normal;
|
||
}
|
||
|
||
address,
|
||
caption,
|
||
cite,
|
||
code,
|
||
dfn,
|
||
em,
|
||
th,
|
||
var {
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 对齐是排版最重要的因素, 别让什么都居中 */
|
||
caption,
|
||
th {
|
||
text-align: left;
|
||
}
|
||
|
||
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 100%;
|
||
font-weight: 500;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 解决ie下重复最后字符 */
|
||
q:before,
|
||
q:after {
|
||
content: '';
|
||
}
|
||
|
||
/* 统一上标和下标 */
|
||
sub,
|
||
sup {
|
||
position: relative;
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
/* 默认不显示下划线，保持页面简洁 */
|
||
ins,
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/** 设置默认字体 **/
|
||
body,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: 14px helvetica neue, arial, hiragino sans gb, microsoft yahei, sans-serif;
|
||
}
|
||
|
||
address,
|
||
cite,
|
||
dfn,
|
||
em,
|
||
var {
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 将斜体扶正 */
|
||
code,
|
||
kbd,
|
||
pre,
|
||
samp {
|
||
font-family: courier new, courier, monospace;
|
||
}
|
||
|
||
/* 统一等宽字体 */
|
||
small {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||
/** 重置列表元素 **/
|
||
ul,
|
||
ol {
|
||
list-style: none;
|
||
}
|
||
|
||
/** 重置文本格式元素 **/
|
||
a {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
color: #333;
|
||
-webkit-transition: all .5s ease;
|
||
-o-transition: all .5s ease;
|
||
-moz-transition: all .5s ease;
|
||
transition: all .5s ease;
|
||
}
|
||
|
||
a:hover {
|
||
color: #9ebee7;
|
||
}
|
||
|
||
/** 清除选中状态蓝色边框 **/
|
||
a,
|
||
img,
|
||
input,
|
||
select,
|
||
textarea {
|
||
outline: none;
|
||
border: none;
|
||
}
|
||
|
||
/** 定义布局方式 **/
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input[type=submit] {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/**************************/
|
||
/********页面样式**********/
|
||
/**************************/
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body {
|
||
min-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.container {
|
||
position: fixed;
|
||
top: 200px;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
/*输入框的样式*/
|
||
.input-box {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 100px;
|
||
padding: 30px;
|
||
color: #fff;
|
||
background: rgba(0, 0, 0, .6);
|
||
text-align: center;
|
||
}
|
||
|
||
.input-box input {
|
||
width: 320px;
|
||
height: 40px;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
border-radius: 10px;
|
||
color: #333;
|
||
-webkit-transition: all .5s;
|
||
-moz-transition: all .5s;
|
||
-ms-transition: all .5s;
|
||
-o-transition: all .5s;
|
||
transition: all .5s;
|
||
}
|
||
|
||
.input-box input:focus {
|
||
box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(0, 0, 0, .6) inset;
|
||
}
|
||
|
||
.input-box .btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-left: 10px;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
background: #cf5a5d;
|
||
background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
|
||
/* Safari 5.1 - 6.0 */
|
||
background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
|
||
/* Opera 11.1 - 12.0 */
|
||
background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
|
||
/* Firefox 3.6 - 15 */
|
||
background: linear-gradient(to right, #f6ad36, #cf5a5d);
|
||
border: 0;
|
||
outline: none;
|
||
cursor: pointer;
|
||
-webkit-transition: all .5s;
|
||
-moz-transition: all .5s;
|
||
-ms-transition: all .5s;
|
||
-o-transition: all .5s;
|
||
transition: all .5s;
|
||
}
|
||
|
||
.input-box .btn:hover {
|
||
box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(255, 255, 255, .6) inset;
|
||
}
|
||
|
||
/*此处为每条弹幕的样式*/
|
||
.container .list {
|
||
position: absolute;
|
||
left: 100%;
|
||
white-space: nowrap;
|
||
color: #fff;
|
||
text-shadow: 0 0 3px #000;
|
||
-webkit-transition: -webkit-transform 25s linear;
|
||
-moz-transition: -moz-transform 25s linear;
|
||
-o-transition: -o-transform 25s linear;
|
||
transition: transform 25s linear;
|
||
z-index: 999;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background-color: rgba(255,255,255,.5);
|
||
padding: 4px 6px;
|
||
border-radius: 50px;
|
||
color: #FFFFFF;
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 3px;
|
||
}
|
||
|
||
/*此处弹幕的移动动画，使用transform不会引起页面的重绘，性能更好*/
|
||
.container .list.animate {
|
||
-webkit-transform: translateX(-3420px);
|
||
-moz-transform: translateX(-3420px);
|
||
-ms-transform: translateX(-3420px);
|
||
-o-transform: translateX(-3420px);
|
||
transform: translateX(-3420px);
|
||
}
|
||
|
||
.container .list .content {
|
||
display: inline-block;
|
||
opacity: 1;
|
||
}
|
||
|
||
.container .list img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 5px;
|
||
border-radius: 50%;
|
||
vertical-align: text-top;
|
||
}
|