纯CSS实现弹幕效果

纯CSS实现弹幕效果

动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果——弹幕~

当你在阅读、看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复杂,但是我们仅仅是看上去和它一样即可~

先放一下实现出来的效果图

有轨弹幕

看标题就可以知道,我们要实现的的在固定行上移动的弹幕(再自己的轨道上移动)。

一、简单画一个背景板,三个轨道

CSS:

.box{
    width: 600px;
    height: 240px;
    background: rgba(0,0,0,0.1);
    margin: 100px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.track{
    height: 30px;
    border: 4px solid rgba(0,0,0,0.3);
}

Html

<div class="box">
    <div class="track">
    </div>
    <div class="track">
    </div>
    <div class="track">
    </div>
</div>

效果图:

二、在每条轨道上添加一条文字

<div class="box">
    <div class="track">
        <div class="child child-1">我是弹幕</div>
    </div>
    <div class="track">
        <div class="child child-2">我是弹幕</div>
    </div>
    <div class="track">
        <div class="child child-3">我是弹幕</div>
    </div>
</div>

三、添加动画,让文字动起来

这里为了让大家有一个直观的感受,我用代码来将一个div盒子移动的全过程显示出来(弹幕),我们来看看它的背后都经历了什么~

移动的思想

  • 注意实际情况是,可视区域外的元素是不会被看见的(设置overflow:hidden
  • 用户可通过transform:translateX()的方式进行移动,也可以通过 left、right的方式进行移动.

附上CSS代码(Html代码同上一步骤):

Css:

.box{
    width: 600px;
    height: 240px;
    background: rgba(0,0,0,0.1);
    margin: 100px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}
.track{
    height: 40px;
    border: 4px solid rgba(0,0,0,0.3);
    color: rgb(127, 197, 35);
}
.child{
    width: 80px;
    height: 20px;
    border: 2px solid red;
    margin-bottom: 20px;
    transform: translateX(1000px);
    animation: scrollTo linear 4s infinite
}// 弹幕盒子的样式
@keyframes scrollTo {
    to{
        transform: translateX(-100px);
    }
}

效果图:

注意:

  • 此时三条弹幕的运动速度相同,起始点和结束点的位置也相同,效果如图上

四、优化弹幕(注意,这里的代码为修改部分,最后会贴出完整代码)

先上一个真实的弹幕截图

我们总结一下他有什么特点?

  1. 弹幕通常在屏幕的上部分
  2. 为了区别每一条弹幕,颜色会有不同
  3. 每条弹幕的移动速度都不会相同
  4. 弹幕的数量可以适当的增加
  5. (题外话,弹幕比电视剧有意思的多~)

我们一一去实现它

  • 弹幕通常在屏幕的上部分
    • 调整一下可视区域的宽高比。
.box{
    width: 800px;
    height: 400px;
    background: rgba(0,0,0,0.1);
    margin: 100px auto 0;
    overflow: hidden;
}
.track{
    height: 40px;
    line-height: 40px;
    border: 2px solid rgba(0,0,0,0.3);
    margin-bottom: 5px;
}
  • 为了区别每一条弹幕,颜色会有不同
    • 删除弹幕的边框。
    • 修改弹幕的文案。
    • 调整弹幕颜色、适当添加光效。
.child{
    width: 80px;
    line-height: 20px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1)
}
//第一个弹幕
.child-1{
    color: brown; //文字颜色
    text-shadow: 2px 2px 3px rgb(248, 81, 20); // 文字阴影
    transform: translateX(1000px);  //文字起始位置
    animation: scrollTo linear 4s infinite; //动画
}
//第二个弹幕
.child-2{
    color: rgb(127, 197, 35);//文字颜色
    text-shadow: 2px 2px 3px rgb(173, 255, 80);// 文字阴影
    transform: translateX(1050px); //文字起始位置
    animation: scrollTo linear 7s infinite; //动画
}
//第三个弹幕
.child-3{
    color: coral;//文字颜色
    text-shadow: 2px 2px 3px coral; // 文字阴影
    transform: translateX(800px); //文字起始位置
    animation: scrollTo linear 5s infinite; //动画
}
@keyframes scrollTo {
    to{
        transform: translateX(-100px);
    }
}

效果如图

这里我们不考虑数量的增加,大家可以考虑用Js动态生成弹幕的方式,本篇文章仅考虑用纯CSS模拟一个弹幕,并尽可能真实。

PS:(如果你想增加弹幕的数量,可以在代码中在复制child-X出来)

最后优化

  • 最后我们要做的事
    1. 给它添加一张背景图(假装我们在看剧)
    2. 删除凸显轨道的边框
    3. 微调整体样式

最后的结果就是这样

本篇博客会收录到有趣的CSS仓库中

有趣的CSS传送门

如果您觉得感兴趣,或者还有帮助到您,不妨给我的github点个star吧~

github传送门

<p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;">本套课程,大喵将手把手带着大家上手精选20个CSS3动画项目精选案例项目实战,让小伙伴们能够轻松上手,企业公司项目开发过程中遇到的页面动画交互效果需求实现,以及一些更加炫酷创意动画想法的实现,成为一名酷酷哒前端开发工程师。</span><span style="font-size:16px;"></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <strong><span style="font-size:16px;">本课程为<span style="font-size:14px;">20</span>套<span style="font-size:14px;">CSS3</span>动画实战课程,所集合构成的一套实战课程。适合热爱前端动画的小伙伴们,课程的主要内容包括:</span></strong> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><span style="font-size:14px;">01.3D</span>文字效果制作、<span style="font-size:14px;">02.</span>雪花飘落效果、<span style="font-size:14px;">03.</span>图文模糊效果、<span style="font-size:14px;">04.</span>文字卡片折叠效果、<span style="font-size:14px;">05.</span>六角形效果、<span style="font-size:14px;">06. </span>进度条颜色跟随效果、<span style="font-size:14px;">07. </span>动态视频背景效果、<span style="font-size:14px;">08. </span>按键文字跳动效果、<span style="font-size:14px;">09. </span>弹跳小球效果、<span style="font-size:14px;">10. 3D</span>翻折菜单导航效果、<span style="font-size:14px;">11. 3D</span>圆环层叠动画效果、<span style="font-size:14px;">12. </span>水波浪球起伏效果、<span style="font-size:14px;">13. </span>遮罩透明滤镜文字效果、<span style="font-size:14px;">14. </span>阴阳无极八卦阵效果、<span style="font-size:14px;">15. </span>文字双屏进入进出效果、<span style="font-size:14px;">16. </span>炫酷光影加载效果、<span style="font-size:14px;">17. </span>文字背景水波浪效果、<span style="font-size:14px;">18. </span>炫酷发光倒影按钮、<span style="font-size:14px;">19. </span>扁平预加载动画效果、<span style="font-size:14px;">20. </span>烟囱冒烟动画效果</span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/202003041008079147.png" alt="" /><img src="https://img-bss.csdn.net/202003041008221455.png" alt="" /><img src="https://img-bss.csdn.net/202003041008376365.png" alt="" /><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页