淘宝全屏动态特效页面陨石彩带代码

Posted 2020-10-12 喵吉欧尼酱

淘宝全屏动态特效页面陨石彩带代码

效果图：

 

---

代码

scrollamount="40"  图片划过的速度，  style="width:1920px;height:1332px   代码中存在多处width  这里是指定图片宽度大小  框和高
其余前一个background指定图片空间地址

background:url(效果png图）、background:url  背景图

<div style="height:1312px">

 <div class="TWidgstt21290aigye footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:1920px;height:1332px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> 

<div class="TWidgstt21290aigye footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:1332px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow:hidden;">

 <div style="width:1920px;margin:0 auto;background: url() no-repeat top center fixed;"><div class="TWidgstt21290aigye mgzxzs_com" style="height:1332px;width:1920px;border:none;padding:0;background:url(https://img.alicdn.com/imgextra/i1/3400276084/TB2LAQoX_nI8KJjSszgXXc8ApXa_!!3400276084.jpg) no-repeat center;overflow:hidden;"  > 
<span class="footer-more-trigger sn-simple-logo most-footer" style="width:3920px;height:2664px;top:-666px;left:-960px;z-index:10;margin:0;border:none;padding:0;background:none;overflow:hidden;transform:rotate(45deg);">
 <marquee style="width:100%;height:100%;" scrollamount="40" scrolldelay="0" direction="down"> <div style="background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2RePUtB8lpuFjy0FnXXcZyXXa-456989075.png) scroll center top;width:9999999px;height:999999px;left:-3920px;">&nbsp;</div> </marquee> </span> 
<div class="footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:1332px;top:0;left:0px;z-index:11;margin:0;border:none;padding:0;background:none;"> 

<a style="display:block;height:1332px;width:1920px;" href="https://item.taobao.com/item.htm?spm=686.1000925.0.0.2aa535cenwdcnF&id=558594327368" target="_blank">&nbsp;</a> </div> 
</div></div> </div> </div> </div>

陨石效果图：替换上即可

https://img.alicdn.com/imgextra/i2/456989075/TB2ELq2twxlpuFjSszgXXcJdpXa-456989075.png