码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-01 15:46:03      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:item   border   mount   overflow   back   foo   footer   pad   存在   

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

效果图:

技术分享

 


代码

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

 

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

标签:item   border   mount   overflow   back   foo   footer   pad   存在   

原文地址:http://www.cnblogs.com/Mjonj/p/7766697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!