Html
    Css
    Js
/*黑色屏幕父容器*/

.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

弹幕代码详解

0