Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html {
	background-color:#f1f1f1;
}
#web-body {
	position:relative;
	padding:20px 30px;
}
.view-content {
	width:100%;
	height:500px; 
	padding-right:310px;
	overflow:hidden;
}
.view {
	background-color:black;
	width:150%;
	height:100%;
	position:relative;
	overflow:hidden;
	left:-50%;
}
.view p {
	display:inline-block;
	position:absolute; 
	right:0;
}
.send-danmu-div {
	width:300px;
	height:500px;
	background-color:white;
	padding:10px;
	position:absolute;
	right:30px;
	top:20px;
	border:1px solid #eee;
}
.message-list { 
	width:100%;
	height:435px;
	border:1px solid #ccc;
	margin-bottom:10px;
	padding:10px;
	position:relative;
}
.message-list p {
	text-align:right;
	line-height:20px;
	margin:5px 0;
}
.send-message-btn {
	width:100%;
	height:30px;
	line-height:30px;
}
.send-message-btn input,.send-message-btn .fasong {
	display:inline-block;
}
.send-message-btn input {
	width:210px;
	height:30px;
	line-height:30px;
	vertical-align:middle;
	outline:none;
	padding:0 10px;
}
.send-message-btn .fasong {
	width:50px;
	background-color:#ff7700;
	color:white;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
}
.greenyellow {
	color:greenyellow;
}
.red {
	color:red;
}
.blue {
	color:blue;
}

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

html5 css3 jq 直播弹幕demo

更新时间:2020-08-08 22:26:32

0