吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 4616|回复: 14
收起左侧

[其他转载] 【分享】网页弹幕效果js特效

[复制链接]
yyn 发表于 2018-6-25 10:09
本帖最后由 wushaominkk 于 2018-6-25 18:22 编辑

别的网站扒下来的,分享给大家,^_^ danmu2.gif

下面的HTML代码被论坛过滤了,下载Zip附件,解压,浏览器打开就可看到效果了
[HTML] 纯文本查看 复制代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style>#dmbox{position: relative;overflow: hidden;background-color: #000;background: url([img]http://ynpic.bj.bcebos.com/xay%2Fe.jpg[/img]);background-size: 120%;}#dmbox a{position: absolute;display: inline-block;padding:0 7px;text-align: center;height:21px;left:calc(100vw);color:#fff;text-shadow: white 0px 0px 10px, white 0px 0px 20px, CornflowerBlue 0px 0px 30px, white 0px 0px 40px, white 0px 0px 70px, white 0px 0px 80px, CornflowerBlue 0px 0px 100px;animation:mymove2 4s infinite;-webkit-animation:mymove2 4s infinite; /*Safari and Chrome*/font-size: 14px;}@keyframes mymove2{0%{left:calc(100vw)}100%{left:-100px;}}</style>

</head>
<body>


<div class="txt"><script src="https://yun.sifuhe.cn/h5-mami/media/media-3.2.3.min.js" type="text/javascript"></script>

<div id="_so_gl8gkrifkvu" style="position:fixed;left:0px;bottom:0px;width:1366px;height:202px;z-index:2147483647"><div style="position:relative;height:202px"><div style="position:absolute;cursor:pointer;z-index:2147483647;top:-20px;right:0px"><span style="float:left;display:block;border-style:solid;border-width:10px 3px;border-color:transparent #888 #888 transparent;height:0;width:0;"></span><span style="float:left;display:black;font-size:12px;background-color:#888;padding:0px 8px;color:#fff;height:20px;line-height:20px;">关 闭</span></div><div><div id="dmbox" style="height:66px;">
<a  style="top:0px;animation:mymove2 15s 0s linear infinite;width:98px">410g 瓦罐带鱼 ¥14.90</a><a  style="top:23px;animation:mymove2 16s 2s linear infinite;width:56px">150g 香辣鱼豆腐 ¥9.90</a>
<a  style="top:45px;animation:mymove2 15s 3s linear infinite;width:98px">100g 金枪鱼罐头 ¥12.80</a>
<a  style="top:67px;animation:mymove2 16s 1s linear infinite;width:70px">425g*5 黄桃果罐 ¥23.90</a>
<a  style="top:0px;animation:mymove2 15s 8s linear infinite;width:98px">425g 糖水桔子 ¥9.90</a>
<a  style="top:23px;animation:mymove2 16s 6s linear infinite;width:70px">425g 砀山梨罐头 ¥9.90</a>
<a  style="top:45px;animation:mymove2 5s 5s linear infinite;width:56px">425g 沙丁鱼罐头 ¥10.80</a><a  style="top:67px;animation:mymove2 26s 5s linear infinite;width:70px">平行济南</a>
<div></div></div></div></div></div>

 </body>


弹幕效果.zip

1.62 KB, 下载次数: 128, 下载积分: 吾爱币 -1 CB

网页弹幕JS特效

免费评分

参与人数 4吾爱币 +5 热心值 +4 收起 理由
臻爱秦时 + 1 + 1 谢谢@Thanks!
wushaominkk + 2 + 1 简单实用!
shao123 + 1 + 1 谢谢@Thanks!
waweiggfnh + 1 + 1 谢谢@Thanks!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

 楼主| yyn 发表于 2018-6-27 09:55
马到功成 发表于 2018-6-26 18:41
这个该如何嵌入到自己的网站网页上呢,不懂代码,试了好多次网站页面被我搞坏了,代码该加到哪里啊?

把代码
复制到你的
模板页最底部试试
马到功成 发表于 2018-6-26 18:41
这个该如何嵌入到自己的网站网页上呢,不懂代码,试了好多次网站页面被我搞坏了,代码该加到哪里啊?
QB56 发表于 2018-6-25 10:29
bnxf 发表于 2018-6-25 10:53
效果不错,谢谢分享
无闻无问 发表于 2018-6-25 10:58
不错不错,谢谢分享
Dream_G 发表于 2018-6-25 11:16
k看不懂也要装的看懂了!
子五十 发表于 2018-6-25 11:39
别人能看到吗,还是自己看的见
zzzain46 发表于 2018-6-25 11:39 来自手机
刚刚开始学网页没多久的我先收藏了,备用
jiazhilin1997 发表于 2018-6-25 11:43
z-index值给这么高,哈哈
thornfish 发表于 2018-6-25 12:01
不错啊。多趴一些
shao123 发表于 2018-6-25 12:33
收藏了,感谢楼主
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-15 17:22

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表