【分享】网页弹幕效果js特效

yyn · 发表于 2018-6-25 10:09

本帖最后由 wushaominkk 于 2018-6-25 18:22 编辑

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

下面的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>

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]

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

免费评分

个人中心