实现构思： 利用css3动画和过度实现视频弹幕从右到左滚动的效果。
css3动画的属性值和用法
| 属性 | 描述 |
|---|---|
| @keframes | 定义动画效果，后接动画名 |
| animation | 所有动画属性的简写属性，除了animation-play-state |
| animation-name | 动画名称 |
| animation-duration | 动画完成一个周期所花费的时间，单位s或ms |
| animation-timing-function | 动画的速度曲线 |
| animation-delay | 动画延迟几秒才开始 |
| animation-iteration-count | 播放的次数 |
| animation-direction | 动画是否在下一周期逆向播放 |
| animation-play-state | 动画播放状态，运行或暂停 |
| animation-fill-mode | 对象动画时间之外的状态 |
animation缩写格式
animation: name duration timing-function delay iteration-count direction;
效果图
实现代码
body
<body>
<div class="content">
<video src=""></video>
<!-- video end -->
<div class="screen">
<div class="dan one">这是一条弹幕</div>
<div class="dan two">这是一条弹幕</div>
<div class="dan three">这是一条弹幕</div>
<div class="dan four">这是一条弹幕</div>
<div class="dan five">这是一条弹幕</div>
<div class="dan six">这是一条弹幕</div>
</div>
<!-- 弹幕 end -->
</div>
</div>
</div>
</body>
css样式
/* 动画帧 */
@keyframes danmu {
from {
transform: translateX(0);
}
to {
transform: translateX(-120vw);
}
}
/* 兼容浏览器 */
@-webkit-keyframes danmu {
from {
transform: translateX(0);
}
to {
transform: translateX(-120vw);
}
}
/* 视频盒子 */
.content{
margin-top: -20px;
height: 460px;
background: #2e2e2e;
position: relative;
z-index: 4;
align-items: center;
align-content: center;
justify-content: center;
overflow-y: hidden;
overflow-x: auto;
padding-top: 20px;
display: flex;
}
.content video {
height: 400px;
width: auto;
margin: 20px 10px;
}
.content .screen {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
top: 0;
left: 0;
z-index: 4;
}
.content .screen .dan {
position: absolute;
left: 100%;
background: rgba(255, 255, 255, 0.7);
word-break: keep-all; /*保持同一行*/
padding: 0 14px;
font-size: 14px;
border-radius: 50px;
height: 24px;
line-height: 24px;
color: #000;
letter-spacing: 2px;
border: solid #ccc 1px;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
cursor: default;
}
.content .screen .dan:hover {
background-color: #fff;
animation-play-state: paused;
}
/* 弹幕end */
.content.screen .one {
top: 80px;
animation: danmu 10s linear 0s infinite;
}
.content.screen .two {
top: 140px;
animation: danmu 7s linear 2s infinite;
}
.content.screen .three {
top: 180px;
animation: danmu 9s linear 1s infinite;
}
.content.screen .four {
top: 240px;
animation: danmu 11s linear 4s infinite;
}
.content.screen .five {
top: 300px;
animation: danmu 12s linear 3s infinite;
}
.content.screen .six {
top: 340px;
animation: danmu 8s linear 0.5s infinite;
}
/* 弹幕效果 end */
![【CSS3】设置超链接样式超链接样式[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)