简单实现jQuery弹幕效果

2020-05-19 07:30:00易采站长站整理

.boxDom{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom{
width: 100%;
height: 60px;
background:#666;
position: fixed;
bottom: 0px;
}
.contet{
width: 500px;
height: 40px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;

}
.title{
display: inline;
font-size: 24px;
vertical-align: bottom;
color: #ffffff;
padding-left: 300px;
}

.text{
width: 300px;
height: 30px;
border:none;
border-radius:5px;
font-size: 20px;
margin-left:60px;
}
.btn{
width: 60px;
height: 30px;
color: #ffffff;
background-color: red;
border:none;
font-size:16px;
margin-left:60px;
margin-top: 20px;
}
.string {
width: 300px;
height: 40px;
margin-top: 20px;
position: absolute;
color: #000;
font-size: 20px;
font-family: "微软雅黑";

}
</style>
</head>
<body>
<div class = "boxDom" id = "boxDom">
<img src="../images/bg_2.jpg" style="width:100%; height:100%" />
<div id = "idDom" class = "idDom">
<div class = "content">
<p class = "title"> 说点什么:</p>
<input type = "text" class = "text"/>
<button type = "button" class = "btn" id = "btn" >发送</button>
</div>
</div>
</div>
</body>
</html>

效果图如下: