风光锦绣

寒冬残荷

195400 发表于 2021-8-19 06:10
#outblk        {
                width:800px;height:1000px;overflow:hidden;position:relative;border:thick grey solid; ...

点赞！但没有楼主的那个效果，好像只有渐变和左右移动，楼主的还有由远及近、图的说明文字同步等等效果。

195400

寒冬残荷 发表于 2021-8-19 11:55
点赞！但没有楼主的那个效果，好像只有渐变和左右移动，楼主的还有由远及近、图的说明文字同步等等效果。

我只是简单模仿一下第一幅画的情况（楼主帖第一幅画向左移动），全部模仿就是个大帖子了。
由远及近是画面放大，由近推远是缩小，文字的隐现是透明度的变化…………
我也不懂SVG，模仿过楼主的一个类似帖子，费了老大的劲
楼主帖江南风情
模仿贴：江南风情 http://www.keai99.com/forum.php?mod=viewthread&tid=498283&highlight=%BD%AD%C4%CF%B7%E7%C7%E9

寒冬残荷

195400

寒冬残荷 发表于 2021-8-19 14:42
.iframe-body-sty{position : relative; overflow : hidden;height : 625px; width : 392px; backgroun ...

小号的呀，其实代码用不着那么复杂

1. <iframe src="http://pan.yinhuabbs.cn/view.php/48bd19a556b068aa03c08122e52f9044.html" frameborder='0' scrolling='no'
   
2. style="width:1000px;height:1600px;transform:scale(0.4);margin:-450px auto;">
   

复制代码

西椅子胡同

寒冬残荷 发表于 2021-8-19 14:42 .iframe-body-sty{position : relative; overflow : hidden;height : 625px; width : 392px; backgroun ...

畅谈交流相得益彰，活跃论坛增长知识，谢谢195400、寒冬残荷二位老师！ 用上transform:scale()这个CSS样式，画面缩小了，有利于在电脑上观看完整画面。

195400

西椅子胡同 发表于 2021-8-19 15:31
畅谈交流相得益彰，活跃论坛增长知识，谢谢195400、寒冬残荷二位老师！{: ...

svg动画蛮神奇的，代码也比较好理解，如果能解决循环播放就完美了。

寒冬残荷

195400 发表于 2021-8-19 15:19
小号的呀，其实代码用不着那么复杂

老师就是老师！喜欢这个论坛，是因为有老师您这样的回帖——畅谈交流、指点开导，而不是只有简单的“欣赏”！

寒冬残荷

195400 发表于 2021-8-19 15:35
svg动画蛮神奇的，代码也比较好理解，如果能解决循环播放就完美了。

等待你用svg标签制作一个作品哦！

寒冬残荷

西椅子胡同 发表于 2021-8-19 15:31
畅谈交流相得益彰，活跃论坛增长知识，谢谢195400、寒冬残荷二位老师！{: ...

晚上好！非常感谢你！看了您的这个作品，我又学到了新东西。

195400

寒冬残荷 发表于 2021-8-19 20:27 等待你用svg标签制作一个作品哦！

我是“眼高手低”的一类人