淘宝全屏雪花特效页面
来源:互联网 发布:思源物业软件 编辑:程序博客网 时间:2024/04/27 16:54
全屏效果:
width:1920px;height:1332px 图片尺寸的宽和高
background:url(图片地址) 图片空间图片链接
gif带有下雪效果的gif图,后面href 指定跳转点击的链接 可空 #
C店天猫区别类似,尺寸大小改变
---------------------以下贴出天猫和淘宝基础版本代码--------------
C店智能版
<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;"><li style="width:1920px;height:1332px;display:block;background:url(https://img.alicdn.com/imgextra/i1/3400276084/TB2LAQoX_nI8KJjSszgXXc8ApXa_!!3400276084.jpg);"><a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2WcD9iFXXXXcfXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
天猫版本
<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;"><li style="width:1920px;height:1332px;display:block;background:url(https://img.alicdn.com/imgextra/i1/3400276084/TB2LAQoX_nI8KJjSszgXXc8ApXa_!!3400276084.jpg);"><a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2WcD9iFXXXXcfXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
c点基础版代码
<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:-1060px;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:1920px;margin:0 auto;background: url() no-repeat top center fixed;"><li style="width:1920px;height:1332px;display:block;background:url(https://img.alicdn.com/imgextra/i1/3400276084/TB2LAQoX_nI8KJjSszgXXc8ApXa_!!3400276084.jpg);"><a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2WcD9iFXXXXcfXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
其它效果代码
稀小雪花代码
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i3/456989075/TB2JwyrchBmpuFjSZFDXXXD8pXa-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
下雪效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB27tQxiFXXXXaDXXXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
闪烁效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i4/456989075/TB2cNQDiFXXXXatXXXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
闪烁十字星效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i1/456989075/TB26l.miFXXXXXRXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
枫叶效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i3/456989075/TB2yDcKiFXXXXXIXXXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
上浮水泡效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB21joFiFXXXXaUXXXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
花瓣飘落效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2HeIfiFXXXXbOXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
七彩流星效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i2/456989075/TB2_DQhiFXXXXbAXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
下雨效果
<a style="display: block;background:url(https://img.alicdn.com/imgextra/i4/456989075/TB2OeQoiFXXXXalXpXXXXXXXXXX-456989075.gif);" href="https://shop453030768.taobao.com/search.htm?spm=2013.1.w5001-17072904642.3.5f1f4e1b0AGDVk&search=y&orderType=hotsell_desc&scene=taobao_shop" target="_blank"><img width="100%" height="100%" src="https://assets.alicdn.com/s.gif" /></a></li></div> </div> </div> </div>
其它自定义效果:
格式动态飘零效果图替换源代码内容
阅读全文
0 0
- 淘宝全屏雪花特效页面
- js雪花特效_跟随页面滚动的下雪特效
- 雪花背景网页特效
- 雪花飞舞特效
- Android--雪花飘动特效
- js雪花飘落特效
- 淘宝特效
- jQuery实现全屏幻灯片的滚动页面特效
- 页面 html5鼠标滚动全屏图片倾斜分割切换特效
- 页面全屏滚动特效(上下或左右)
- Android实现雪花飘落特效
- 雪花特效---纯css实现
- H5+原生js 雪花特效
- 基础版专业版全屏海报图片轮播代码生成器(淘宝店铺特效装修工具软件)
- flash页面出现雪花
- 淘宝全屏店招
- 【JS特效】全屏滚动
- banner全屏特效切换
- linux使用shell实现守护一个java进程。
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'
- Windows Server 2008 + Sql Server 2014集群安装
- 比对js与oc对贝塞尔曲线绘制的异同之处
- /proc/sys/net/ipv4/ 下网络参数的理解以及sysctl命令修改内核参数
- 淘宝全屏雪花特效页面
- nuxt的 nuxt-link 有个坑
- 学习计划
- Android——正确的Fragment写法
- acm 杭电 牛肉干
- TFTPf服务
- 强大的时间/日期格式化插件 momentJs
- arm,x86,mips,龙芯
- 文章标题