css3动画实现弹幕效果

最新推荐文章于 2024-09-18 09:28:47 发布

XiaoJia913

最新推荐文章于 2024-09-18 09:28:47 发布

阅读量2k

点赞数 2

分类专栏： H5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/ojbk_1627/article/details/107959201

版权

该博客介绍如何利用css3的动画和过渡效果，实现视频弹幕从右到左滚动的视觉体验。详细讨论了css3动画的属性值和用法，并提供了实现这一效果的代码示例。

摘要由CSDN通过智能技术生成

实现构思： 利用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