一、乞丐版的弹幕实现
html
<div class="tanmu">
<div class="tanmuContent">
<span class="headImg"><img src="img/1.png" /></span>
<span class="t-numer">这是弹幕哈哈哈啊哈哈哈哈哈 </span>
<span class="t-praise1"></span>
</div>
</div>
css
<style>
.tanmu{
/*width:100%;
height: 80%;
position:absolute;
left: 0;
top: 10%;
font-size:40px;*/
z-index: 22;
}
.tanmu{
position:absolute;
height:34px;
border-radius:45px;
background:#fff;
color:#333;
left:0;
top:0;
font-size:16px;
white-space:nowrap;
padding-left:2px;
/*padding-right:10px;*/
line-height:34px;
opacity: 0.9;
animation:barrage 15s linear 0s;
}
.tanmuContent{
display: flex;
justify-