html弹幕代码135,弹幕代码详解

/*黑色屏幕父容器*/

.barrage .screen {

width: 100%;

height: 100%;

/*绝对定位设置 上边0px右边0px*/

position: absolute;

top: 0px;

right: 0px;

}

/*退出符号*/

.barrage .screen .s_close {

/*图像显示的前后越小越靠后*/

z-index: 2;

top: 20px;

right: 20px;

position: absolute;

/*默认定义标准文本*/

text-decoration: none;

width: 40px;

height: 40px;

/*定义圆角形状*/

border-radius: 20px;

/*文本居中对齐*/

text-align: center;

color: #fff;

background: #000;

/*设置行间的距离 //没有什么用可以删除*/

line-height: 40px;

/*此元素不会被显示*/

display: none;

}

/*黑屏子容器*/

.barrage .screen .mask {

/*相对定位*/

position: relative;

width: 100%;

height: 100%;

background: #000;

/*设置透明的级别*/

opacity: 0.5;

/*IE8以及更早的浏览器设置的不透明属性*/

filter: alpha(opacity: 1);

z-index: 1;

}

.barrage {

display: none;

width: 100%;

height: 100%;

}

.barrage .screen .mask div {

position: absolute;

/*弹幕的字体的大小*/

font-size: 20px;

/*定义粗体字符*/

font-weight: bold;

/* 规定段落文本不换行*/

white-space: nowrap;

line-height: 40px;

z-index: 40;

}

.barrage .send {

z-index: 1;

width: 100%;

height: 6%;

background: #000;

position: absolute;

/*低端0px*/

bottom: 0px;

/*浏览器设置左边边距*/

margin-left: auto;

/*浏览器设置右边边距*/

margin-right: auto;

/*把文本排列到中间*/

text-align: center;

}

.barrage .send .s_text {

width: 79%;

height: 90%;

line-height: 10px;

font-size: 20px;

/*上下边距为零*/

margin: 0 auto;

/*字体样式*/

font-family: "微软黑体";

}

.barrage .send .s_btn {

margin: 0 auto;

width: 18%;

height: 90%;

background: #22B14c;

color: #fff;

}