css3动画实现伪弹幕效果
如图所示:
效果还可以直接用麦唱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动画实现伪弹幕效果的更多相关文章
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- CSS3动画中的animation-timing-function效果演示
CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms ...
- CSS3动画实现高亮光弧效果,文字和图片(一闪而过)
前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...
- css3动画(animation)效果3-正方体合成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画(animation)效果1-漂浮的白云
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画(animation)效果2-旋转的星球
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- 美妙的 CSS3 动画!一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
随机推荐
- Linux 流量监控工具 iftop
Linux 流量监控工具 iftop Iftop工具主要用来显示本机网络流量情况及各相互通信的流量集合,如单独同哪台机器间的流量大小,非常适合于代理服务器和iptables服务器使用,这样可以方便的查 ...
- Vue 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- linux下 GCC编译链接静态库&动态库
静态库 有时候需要把一组代码编译成一个库,这个库在很多项目中都要用到,例如libc就是这样一个库, 我们在不同的程序中都会用到libc中的库函数(例如printf),也会用到libc中的变量(例如以后 ...
- 20145308 《网络对抗》 注入shellcode+Return-to-libc攻击 学习总结
20145308 <网络对抗> 逆向及BOF进阶实践 注入shellcode+Return-to-libc攻击 学习总结 实践目的 注入shellcode 实现Return-to-libc ...
- android studio设计模式和文本模式切换
- topcoder srm 415 div1
problem1 link 每次贪心地从crans由大到小地找到一个能搬得动地尽量大地box即可. problem2 link 首先,$hava$可以全部换成钱,然后就是找到一个最小的钱减去自己已有的 ...
- Restful framework【第十一篇】url路由控制
基本使用 -url控制 -传统的url配置 url(r'^books/$', views.BookView.as_view()), url(r'^books/(?P<pk>\d+)$', ...
- 【无法使用yum安装软件】使用yum命令安装软件提示No package numactl.x86_64 available.
在安装mysql时需要安装numactl.x86_64 使用yum -y install numactl.x86_64时报错 [root@sdp6 mysql]# yum -y install num ...
- C语言变量的作用域和存储类型
1.动态局部变量:也称局部变量.自动变量,是指在函数内部定义的自动变量,不带static修饰,作用域是定义该变量的子程序.在退出函数后,变量自带内存会自动释放. 2.静态局部变量:是指在函数内部定义的 ...
- 论文笔记之:Deep Attributes Driven Multi-Camera Person Re-identification
Deep Attributes Driven Multi-Camera Person Re-identification 2017-06-28 21:38:55 [Motivation] 本文 ...