圣诞漂浮物特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-12-23 21:03:52　-　阅:　-　评:0　-　积分:0

适用范围：已开通旺铺css样式的B/C店。未开通旺铺css的店铺需要使用《破解淘宝自定义css权限框架》(提示：由于破解版不稳定，频频遭封杀,建议开通旺铺css以保稳定效果)

后天就圣诞了，刚在公司又搞了一会儿特效，搞了个漂浮物的，如下图:

效果分析：用marquee滚动代码实现滚动，里面是9张图片进行定位，可重复多次。

css样式

/*漂浮物特效*/
.ylsj-pfw{ position:relative}
.ylsj-pfw span{display:inline-block;width:65px;height:95px;background-repeat:no-repeat;background-position:center top;position:absolute;}
.ylsj-pfw_qq1{background-image:url(qq12.png);}
.ylsj-pfw_qq2{background-image:url(qq13.png);}
.ylsj-pfw_qq3{background-image:url(qq14.png);}
.ylsj-pfw_qq4{background-image:url(qq15.png);}
.ylsj-pfw_qq5{background-image:url(qq128.png);}
.ylsj-pfw_qq6{background-image:url(qq30.png);}
.ylsj-pfw_qq7{background-image:url(qq31.png);}
.ylsj-pfw_qq8{background-image:url(qq33.png);}
.ylsj-pfw_qq9{background-image:url(qq32.png);}
/*全局公用定位*/
.ylsj-po_a{position:absolute;}
.ylsj-qp {position: absolute;left: 50%;width: 1920px;height: 100%;margin-left: -960px;text-align: center;}
/*京东特效，可忽略，在此不给值*/
.ylsj-ts_ro360/*旋转*/
.ylsj-ts_ro_y/*位移*/

html内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圣诞漂浮物特效----艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="漂浮物特效,淘宝店铺装修,源码分享,滚动代码,marquee,统一框架">
<link type="text/css" rel="stylesheet" href="http://www.yilingsj.com/d/file/code/taobao.css"/>
</head>
<body>
<!--复制开始-->
<div class="ylsj-qp ylsj-fl_img clearfix" style="height:598px;background-color:#fff;"><img src="http://img01.taobaocdn.com/imgextra/i1/1758846006/T2rIysXylaXXXXXXXX_!!1758846006.jpg"><img src="http://img03.taobaocdn.com/imgextra/i3/1758846006/T2.zxLXs8aXXXXXXXX_!!1758846006.jpg"><img src="http://img03.taobaocdn.com/imgextra/i3/1758846006/T2ZUOCXy8aXXXXXXXX_!!1758846006.jpg"><img src="http://img01.taobaocdn.com/imgextra/i1/1758846006/T2MW9PXstaXXXXXXXX_!!1758846006.jpg">
</div>
/*漂浮物特效开始*/
<div class="ylsj-po_a">
　<marquee behavior="scroll" scrollamount="2" direction="up" style="height:598px;width:1920px;">
　　<div class="ylsj-pfw" style="height:450px;">
　　  <span class="ylsj-pfw_qq1 ylsj-ts_ro360 ylsj-ts_all4" style="left:76%;top:15%">　</span>
　  　<span class="ylsj-pfw_qq2 ylsj-ts_ro_y  ylsj-ts_all4" style="left:15%;top:5%">　</span>
　  　<span class="ylsj-pfw_qq3 ylsj-ts_ro360 ylsj-ts_all4" style="left:84%;top:55%">　</span>
　  　<span class="ylsj-pfw_qq4 ylsj-ts_ro_y  ylsj-ts_all4" style="left:25%;top:78%">　</span>
　  　<span class="ylsj-pfw_qq5 ylsj-ts_ro_y  ylsj-ts_all4" style="left:37%;top:38%">　</span>
　  　<span class="ylsj-pfw_qq6 ylsj-ts_ro360 ylsj-ts_all4" style="left:95%;top:7%">　</span>
　  　<span class="ylsj-pfw_qq7 ylsj-ts_ro_y  ylsj-ts_all4" style="left:2%;top:35%">　</span>
　  　<span class="ylsj-pfw_qq8 ylsj-ts_ro360 ylsj-ts_all4" style="left:53%;top:24%">　</span>
　  　<span class="ylsj-pfw_qq9 ylsj-ts_ro_y  ylsj-ts_all4" style="left:67%;top:45%">　</span>
　 </div>
　   <div class="ylsj-pfw" style="height:450px;">
　　  <span class="ylsj-pfw_qq1 ylsj-ts_ro360 ylsj-ts_all4" style="left:16%;top:5%">　</span>
　　  <span class="ylsj-pfw_qq2 ylsj-ts_ro_y  ylsj-ts_all4" style="left:45%;top:75%">　</span>
　　  <span class="ylsj-pfw_qq3 ylsj-ts_ro360 ylsj-ts_all4" style="left:4%;top:25%">　</span>
　　  <span class="ylsj-pfw_qq4 ylsj-ts_ro_y  ylsj-ts_all4" style="left:35%;top:58%">　</span>
　　  <span class="ylsj-pfw_qq5 ylsj-ts_ro_y  ylsj-ts_all4" style="left:24%;top:88%">　</span>
　　  <span class="ylsj-pfw_qq6 ylsj-ts_ro360 ylsj-ts_all4" style="left:64%;top:17%">　</span>
　　  <span class="ylsj-pfw_qq7 ylsj-ts_ro_y  ylsj-ts_all4" style="left:95%;top:55%">　</span>
　　  <span class="ylsj-pfw_qq8 ylsj-ts_ro360 ylsj-ts_all4" style="left:43%;top:4%">　</span>
　　  <span class="ylsj-pfw_qq9 ylsj-ts_ro_y  ylsj-ts_all4" style="left:76%;top:35%">　</span>
　   </div>
　   <div class="ylsj-pfw" style="height:450px;">
　　  <span class="ylsj-pfw_qq1 ylsj-ts_ro360 ylsj-ts_all4" style="left:36%;top:45%">　</span>
　　  <span class="ylsj-pfw_qq2 ylsj-ts_ro_y  ylsj-ts_all4" style="left:45%;top:15%">　</span>
　　  <span class="ylsj-pfw_qq3 ylsj-ts_ro360 ylsj-ts_all4" style="left:74%;top:75%">　</span>
　　  <span class="ylsj-pfw_qq4 ylsj-ts_ro_y  ylsj-ts_all4" style="left:5%;top:39%">　</span>
　　  <span class="ylsj-pfw_qq5 ylsj-ts_ro_y  ylsj-ts_all4" style="left:17%;top:27%">　</span>
　　  <span class="ylsj-pfw_qq6 ylsj-ts_ro360 ylsj-ts_all4" style="left:85%;top:7%">　</span>
　　  <span class="ylsj-pfw_qq7 ylsj-ts_ro_y  ylsj-ts_all4" style="left:22%;top:40%">　</span>
　　  <span class="ylsj-pfw_qq8 ylsj-ts_ro360 ylsj-ts_all4" style="left:63%;top:86%">　</span>
　　  <span class="ylsj-pfw_qq9 ylsj-ts_ro_y  ylsj-ts_all4" style="left:92%;top:57%">　</span>
　　</div>
　</marquee>
</div>
<!--复制结束-->
<p class="ylsj-po_a" style="font-size:16px;background-color:#ccc;">请耐心等待加载······<br /><br /><br /><br />返回原文：<a href="http://www.yilingsj.com/code/2013-12-23/134.html" target="_blank" title="圣诞漂浮物特效">圣诞漂浮物特效</a></p>
</body>
</html>

点此下载→→【代码】圣诞漂浮物特效.zip　　　

下面附源码框架分析图一张：

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-12-23/134.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！