【全屏】佛菩萨圣像《左右移动切换图片效果》
<style type="text/css">#pichold {
width:30000px;
height:628px;
animation: pshift 160s ease-out infinite alternate;
}
#pichold img {width:1000px;height:728px;float:left;}
#outframe {
width:1000px;
height:628px; margin:160px 0 16px -202px;
overflow:hidden;
border-radius:32px;
position:relative;
----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
}
@keyframes pshift {
0%,3% {
margin-left: 0px;
}
4%,7% {
margin-left: -1000px;
}
8%,11% {
margin-left: -2000px;
}
12%,15% {
margin-left: -3000px;
}
16%,19% {
margin-left: -4000px;
}
20%,23% {
margin-left: -5000px;
}
24%,27% {
margin-left: -6000px;
}
28%,31% {
margin-left: -7000px;
}
32%,35% {
margin-left: -8000px;
}
36%,39% {
margin-left: -9000px;
}
40%,43% {
margin-left: -10000px;
}
44%,47% {
margin-left: -11000px;
}
48%,51% {
margin-left: -12000px;
}
52%,55% {
margin-left: -13000px;
}
56%,59%{
margin-left: -14000px;
}
60%,63% {
margin-left: -15000px;
}
64%,67% {
margin-left: -16000px;
}
68%,71% {
margin-left: -17000px;
}
72%,75% {
margin-left: -18000px;
}
76%,79% {
margin-left: -19000px;
}
80%,83% {
margin-left: -20000px;
}
84%,87% {
margin-left: -21000px;
}
88%,91% {
margin-left: -22000px;
}
94%,97% {
margin-left: -23000px;
}
98%,100% {
margin-left: -24000px;
}
}
</style>
<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC0.js" charset="utf-8"><\/script>');
</script>
<!-- script type="text/javascript" src="processLRC.js" ></script -->
<script type="text/javascript">
var opts = {
};
setTimeout(function(){procLRC(opts);}, 1000);
</script>
</textarea>
<div id="outframe">
<div id="pichold">
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
</div><br><br><br><br>
页:
[1]