地藏莲社 》佛学论坛

 找回密码
 立即注册
搜索
查看: 2463|回复: 1

【全屏】佛菩萨圣像《左右移动切换图片效果》

[复制链接]

352

主题

998

帖子

4295

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4295
发表于 2020-10-26 22:27:42 | 显示全部楼层 |阅读模式




回复

使用道具 举报

352

主题

998

帖子

4295

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4295
 楼主| 发表于 2020-10-26 22:29:57 | 显示全部楼层
[左右移动图片切换效果代码:





<style type="text/css">
#pichold        {
        width:30000px;
        height:728px;
        animation: pshift 120s ease-out infinite alternate;
}
#pichold img        {width:1000px;height:728px;float:left;}
#outframe        {
        width:1000px;
        height:728px; margin:120px 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>





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|地藏莲社

GMT+8, 2024-3-29 14:42 , Processed in 0.039978 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表