Html
    Css
    Js

    
                        
html,body {
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	font-family:"微软雅黑";
	font-size:62.5%;
	background-color:black;
}
.boxDom {
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}
.idDom {
	width:100%;
	height:100px;
	background:#666;
	position:fixed;
	bottom:0px;
}
.list {
	width:300px;
	height:100%;
	background:#888;
	position:fixed;
	right:0px;
	z-index:100;
}
.ammo {
	position:absolute;
	width:270px;
	background-color:white;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	margin:auto;
	border-radius:5px;
	padding:5px;
	z-index:101;
	font-size:20px;
}
.content {
	display:inline-block;
	width:560px;
	height:40px;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	margin:auto;
}
.title {
	display:inline;
	font-size:4em;
	vertical-align:bottom;
	color:#fff;
}
.text {
	border:none;
	width:300px;
	height:30px;
	border-radius:5px;
	font-size:2.4em;
}
.btn {
	width:60px;
	height:30px;
	background:#f90000;
	border:none;
	color:#fff;
	font-size:2.4em;
	border-radius:5px;
}
.btn2 {
	width:100px;
	height:30px;
	background:#f90000;
	border:none;
	color:#fff;
	font-size:2.4em;
	border-radius:5px;
}
span {
	width:300px;
	height:40px;
	position:absolute;
	overflow:hidden;
	color:#000;
	font-size:4em;
	line-height:1.5em;
	cursor:pointer;
	white-space:nowrap;
}
.content select {
	width:60px;
	height:30px;
}

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

视频网站简易弹幕效果

改变字体功能未完善,这部分如有需要可自行添加少许jquery代码即可实现
详细步骤有备注。
在下新人,如有问题,望见谅!

3
      Ki no??1
      2019/11/20 16:08:33
      css {
      	white-space:nowrap;
      	text-overflow:ellipsis;
      	word-break:hidden;
      }

      另外合理利用title属性,达到意想不到的效果。

      回复
      Miss李0
      2019/10/30 11:36:10
      输入数字或者字母过长,会直接超出屏幕。。这里没做处理
          西瓜0
          2019/10/30 12:02:03

          添加css样式,

          .ammo div{word-wrap:break-word;}

          即可

      回复