【分享】网页弹幕效果js特效
本帖最后由 wushaominkk 于 2018-6-25 18:22 编辑别的网站扒下来的,分享给大家,^_^
下面的HTML代码被论坛过滤了,下载Zip附件,解压,浏览器打开就可看到效果了
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>#dmbox{position: relative;overflow: hidden;background-color: #000;background: url(http://ynpic.bj.bcebos.com/xay%2Fe.jpg);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;">
<astyle="top:0px;animation:mymove2 15s 0s linear infinite;width:98px">410g 瓦罐带鱼 ￥14.90</a><astyle="top:23px;animation:mymove2 16s 2s linear infinite;width:56px">150g 香辣鱼豆腐 ￥9.90</a>
<astyle="top:45px;animation:mymove2 15s 3s linear infinite;width:98px">100g 金枪鱼罐头 ￥12.80</a>
<astyle="top:67px;animation:mymove2 16s 1s linear infinite;width:70px">425g*5 黄桃果罐 ￥23.90</a>
<astyle="top:0px;animation:mymove2 15s 8s linear infinite;width:98px">425g 糖水桔子 ￥9.90</a>
<astyle="top:23px;animation:mymove2 16s 6s linear infinite;width:70px">425g 砀山梨罐头 ￥9.90</a>
<astyle="top:45px;animation:mymove2 5s 5s linear infinite;width:56px">425g 沙丁鱼罐头 ￥10.80</a><astyle="top:67px;animation:mymove2 26s 5s linear infinite;width:70px">平行济南</a>
<div></div></div></div></div></div>
</body>
马到功成 发表于 2018-6-26 18:41
这个该如何嵌入到自己的网站网页上呢，不懂代码，试了好多次网站页面被我搞坏了，代码该加到哪里啊？
把代码
复制到你的
模板页最底部试试 这个该如何嵌入到自己的网站网页上呢，不懂代码，试了好多次网站页面被我搞坏了，代码该加到哪里啊？ 收藏了。以后可能用得着 效果不错，谢谢分享 不错不错，谢谢分享 k看不懂也要装的看懂了！ 别人能看到吗，还是自己看的见 刚刚开始学网页没多久的我先收藏了，备用 z-index值给这么高，哈哈 不错啊。多趴一些 收藏了，感谢楼主
页:
[1]
2