如图所示：

　　

　效果还可以直接用麦唱APP把一首歌分享到微信里面看到，方法类似全民K歌的方法，都是用css3动画实现的，

　　代码如下：（这是我做真实效果前的一个dome） 直接粘代码就可以看到效果，里面有两个js,一个是jq一个是rem适配的js,之前博客里面有这个适配的js

　　　　

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sy.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
　　*{
　　　　margin: 0;
　　　　padding: 0;
　　}
　　html,body{
　　　　width: 100%;
　　　　height: 100%;
　　}
　　#Barrage{
　　　　width: 100%;
　　　　height: 28.2rem;
　　　　background-color: bisque;
　　　　overflow: hidden;
　　　　position: relative;
　　　　-webkit-backface-visibility: hidden;
　　　　-moz-backface-visibility: hidden;
　　　　-ms-backface-visibility: hidden;
　　　　backface-visibility: hidden;
　　　　-webkit-perspective: 1000;
　　　　-moz-perspective: 1000;
　　　　-ms-perspective: 1000;
　　　　perspective: 1000;
　　}
　　.danmuobj1{
　　　　-webkit-animation:move 2s ease-in-out 1;
　　　　animation:move 2s ease-in-out 1;
　　　　-webkit-animation-fill-mode: forwards;
　　　　animation-fill-mode: forwards;
　　　　-webkit-animation-delay: 3000ms;
　　　　animation-delay: 3000ms;

　　}
　　.danmuobj2{
　　　　-webkit-animation:move 6s linear 1;
　　　　animation:move 6s linear 1;
　　　　-webkit-animation-fill-mode: forwards;
　　　　animation-fill-mode: forwards;
　　　　-webkit-animation-delay: 1000ms;
　　　　animation-delay: 1000ms;

　　}
　　.danmuobj3{
　　　　-webkit-animation:move 9s linear 1;
　　　　animation:move 9s linear 1;
　　　　-webkit-animation-fill-mode: forwards;
　　　　animation-fill-mode: forwards;
　　　　-webkit-animation-delay: 1000ms;
　　　　animation-delay: 1000ms;

　　}
　　.danmuobj4{
　　　　-webkit-animation:move 15s linear 1;
　　　　animation:move 15s linear 1;
　　　　-webkit-animation-fill-mode: forwards;
　　　　animation-fill-mode: forwards;
　　　　-webkit-animation-delay: 800ms;
　　　　animation-delay: 800ms;

　　}
　　.danmuobj5{
　　　　-webkit-animation:move 3s linear 1;
　　　　animation:move 3s linear 1;
　　　　-webkit-animation-fill-mode: forwards;
　　　　animation-fill-mode: forwards;
　　　　-webkit-animation-delay: 1200ms;
　　　　animation-delay: 1200ms;

　　}
　　@-webkit-keyframes move{
　　　　0%{
　　　　　　-webkit-transform: translate3d(0px,0,0);
　　　　　　transform: translate3d(0px,0,0);
　　　　}
　　　　100%{
　　　　　　-webkit-transform: translate3d(-1124px,0,0);
　　　　　　transform: translate3d(-1124px,0,0);
　　　　}
　　}

　　#open{
　　　　width: 5.0em;
　　　　height: 5.0em;
　　　　line-height: 5.0rem;
　　　　/*background-color: blue;*/
　　}
　　#close{
　　　　width: 5.0em;
　　　　height: 5.0em;
　　　　line-height: 5.0rem;
　　　　/*background-color: black;*/
　　}
</style>
</head>

<body>
　　<div id="Barrage">

　　</div>
　　<div id="open">
　　　　打开弹幕
　　</div>
　　<div id="close">
　　　　关闭弹幕
　　</div>
</body>
<script type="text/javascript">
　　var jj = 0;
　　var arr = ["还不必多说", "孟大妈排名都平等的", "难道是哪都撒", "dsajdjksajd", "孟大妈排名都平等的", "孟大妈排名都平等的","还不必多说", "孟大妈排名都平等的", "难道是哪都撒大家别惦记拜见大圣", "dsajdjksajd", "孟大妈排名都平等的", "难道你三大块脑袋里看到拉萨离队抹上了房门时可免费"]
　　var srr = ["danmuobj1","danmuobj2","danmuobj3","danmuobj4","danmuobj5"]
　　function danmuopen(){
　　　　var num = 0;
　　　　var opentimer = setInterval(function(){
　　　　if (num > 12) {
　　　　　　num = 0;
　　}
　　var danmuobj = $('<p style="font-size: 1.0rem;z-index: 10;overflow: hidden; padding:0.2rem 1.0rem; border-radius: 1.0rem;white-space: nowrap; 　　color:#ffffff;background:rgba(49,58,65,0.3); max-width:10rem ;text-overflow: ellipsis;">' + arr[num] + '</p>');
　　// danmuobj.addClass("danmuobj");
　　danmuobj.css({
　　　　"position":"absolute",
　　　　"right":"-400px",
　　　　"top":rand(5,24)+"rem"
　　　　})
　　　　$("#Barrage").append(danmuobj);
　　　　　　danmuobj.addClass(srr[rand(0,4)]);
　　　　　　num++;
　　　　},1000)
　　}

　　danmuopen();

　　setInterval(function() {
　　　　var lis = $("#Barrage>p")
　　　　if(lis.length > 30) {
　　　　　　$("#Barrage p:eq(1)").remove();
　　　　}
　　}, 20)

　　$("#open").on("click",function(){
　　　　$("#Barrage").show();
　　})

　　$("#close").on("click",function(){
　　　　$("#Barrage").empty();
　　　　$("#Barrage").hide();
　　})
</script>
</html>

　　　　

css3动画实现伪弹幕效果的更多相关文章

  1. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  2. CSS3动画中的animation-timing-function效果演示

    CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms ...

  3. CSS3动画实现高亮光弧效果,文字和图片（一闪而过）

    前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...

  4. css3动画（animation）效果3-正方体合成

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css3动画（animation）效果1-漂浮的白云

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css3动画（animation）效果2-旋转的星球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  8. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

  1. CRC、MD5和SHA1的区别？

    什么是CRC校验?CRC即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并将 ...

  2. oracle 12cR2 smart flash cache实测

    最近一直在处理新系统的性能优化问题,这两天特地测试了下oracle 11gR2开始引入的smart flash cache. 其介绍参考MOS文档,How To Size the Database S ...

  3. eclipse maven Errors while generating javadoc on java8

    With JDK 8, we are unable to get Javadoc unless your tool meets the standards of doclint. Some of it ...

  4. AMQP 0.9.1和1.0协议差别以及rabbitmq支持情况

    RabbitMQ implements AMQP 1.0 via a plugin. However, AMQP 1.0 is a completely different protocol than ...

  5. 09：vuex组件间通信

    1.1 vuex简介 官网:https://vuex.vuejs.org/zh/guide/ 参考博客:https://www.cnblogs.com/first-time/p/6815036.htm ...

  6. Codeforces Round #425 (Div. 2) Problem A Sasha and Sticks (Codeforces 832A)

    It's one more school day now. Sasha doesn't like classes and is always bored at them. So, each day h ...

  7. 牛客网数据库SQL实战(21-25)

    21.查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_no以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` i ...

  8. Selenium 15: How to Run Parallel Tests Using Selenium Grid and JUnit

    In this post, I will give two techniques and describe how to run your selenium tests in parallel by ...

  9. topcoder srm 515 div1

    problem1 link 暴力枚举即可. problem2 link 一共有24小时,所以最多有24个顾客.设$f[x][y][z]$表示还剩下$x$把刀,现在时间是$y$,以及来过的顾客集合为$z ...

  10. Java——List：list.add(index, element)和list.set(index, element)的区别

    add(index, element) 含义:在集合索引为index的位置上增加一个元素element,集合list改变后list.size()会增加1 用法 testList.add(index, ...