如图所示：

　　

　效果还可以直接用麦唱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. MD5算法详解

    MD5是什么 message-digest algorithm 5(信息-摘要算法).经常说的“MD5加密”,就是它→信息-摘要算法.在下载一下东西时,经常在一些压缩包属性里,看到md5值.而且这个下 ...

  2. oracle 18c的版本号规则

    18C之后的版本标识 从2017年7月开始,Oracle改变了以往的数据库软件发布流程,采用年度Release和季度更新的策略. Yearly Release 将之前的N年一发布更改为每年一发布.每年 ...

  3. 关于actor模型

    actor model是1973年就提出的一个分布式并发编程模型,在erlang语言中得到广泛支持和应用.目前Java中也出现了很多支持actor模型的库:akka.killim.jetlang等等, ...

  4. 批处理:根据进程名称查询进程，如果有进程就输出up没有就输出donw

    需求:windows系统上  根据进程名称查询进程,如果有进程就输出 up ,没有就输出  donw. ::Final interpretation is owned by chenglee ::@e ...

  5. linux下网卡bonding配置（转）

    linux下网卡bonding配置   章节 bonding技术 centos7配置bonding centos6配置bonding 一.bonding技术 bonding(绑定)是一种linux系统 ...

  6. bzoj 4044 Virus synthesis - 回文自动机 - 动态规划

    题目传送门 需要高级权限的传送门 题目大意 要求用两种操作拼出一个长度为$n$的只包含'A','T','G','C'的字符串 在当前字符串头或字符串结尾添加一个字符 将当前字符串复制,将复制的串翻转, ...

  7. bzoj 3875 骑士游戏 - spfa - 动态规划

    Description  [故事背景] 长期的宅男生活中,JYY又挖掘出了一款RPG游戏.在这个游戏中JYY会 扮演一个英勇的骑士,用他手中的长剑去杀死入侵村庄的怪兽. [问题描述] 在这个游戏中,J ...

  8. 一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器（了解）

    一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量ke ...

  9. Restful framework【第十一篇】url路由控制

    基本使用 -url控制 -传统的url配置 url(r'^books/$', views.BookView.as_view()), url(r'^books/(?P<pk>\d+)$', ...

  10. oracle 之 基础操作

    //删除存在的表空间及数据 drop tablespace TS_YYGL including contents and datafiles 若是出现了提示 错误 导致无法全部删除,那么就执行以下语句 ...