红枫 发表于 2021-6-1 17:10

彩蝶

<DIV style="POSITION: relative; WIDTH: 510px; TOP: 5px; LEFT: 150px"><IFRAME height=835 marginHeight=0 src="http://pan.yinhuabbs.cn/view.php/d4f4d14accfbe59840fd8b391c5b77de.html" frameBorder=0 width=510 marginWidth=0 scrolling=no></IFRAME></DIV>

雄鹰翱翔 发表于 2021-6-1 18:57

漂亮，赞一个！

195400 发表于 2021-6-1 21:05

图片很漂亮！

用CSS动画做可能要简单些

195400 发表于 2021-6-1 21:33

<style type="text/css">
        #ptall img        {
                width:500px;
                height:800px;
        }
        #ptall         {
                width:500px;
                height:8800px;
                animation: pshift 60s ease-out infinite alternate;
        }
        #outframe        {
                width:500px;
                height:800px;
                overflow:hidden;
                border-radius:10px;
                border:8px solid #9d3;
                margin:10px auto;
                position:rwlative;
        }
        #ptall:hover        {
                animation-play-state:paused;
        }
       
@keyframes pshift {
        0%,8% {
                margin-top: 0px;
        }
        9%,17% {
                margin-top: -800px;
        }

        18%,26% {
                margin-top: -1600px;
        }

        27%,35% {
                margin-top: -2400px;
        }

        36%,44% {
                margin-top: -3200px;
        }

        45%,53% {
                margin-top: -4000px;
        }

        54%,62% {
                margin-top: -4800px;
        }

        63%,71% {
                margin-top: -5600px;
        }
        72%,80% {
                margin-top: -6400px;
        }
        81%,89% {
                margin-top: -7200px;
        }
        90%,100% {
                margin-top: -8000px;
        }
}

</style>

<div id="outframe">
<div id="ptall">

<img src="http://pan.yinhuabbs.cn/view.php/cd4a1698ee78131b8dc5bfeaf0c8227a.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/658f7abc48e035df309ec53eedfc1f52.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/cf1c61a410de91a971dfc00b9f648c9d.jpg" />

<img src="http://pan.yinhuabbs.cn/view.php/db385c3a31ef1b900238a5ee3084c375.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/df748097b505f9810f19d6785e6e984e.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/eb96cfaca165424365e954d280310230.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/46663b20e97361415f17317b6de335d8.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/38791f0b24b72c0f870a6d73b4905736.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/0bec22d8e9b1c427543652626d97d84a.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/50a12e473c56542cacf0616fd5c5a60d.jpg" />
<img src="http://pan.yinhuabbs.cn/view.php/5db3c27c5eda1547d12ad6bd3c626b4d.jpg" />

</div>
</div>
页: [1]
查看完整版本: 彩蝶