论坛 › 动画音画 › 金秋桂花香

起个网名好难 发表于 2024-10-2 21:04

金秋桂花香

<meta name="referrer" content="never" />
<style>
#oBlk        {position:relative; width:1000px;margin:32px 0 40px calc(50% - 581px);overflow:hidden;border-radius:24px; box-shadow:4px 4px 10px black;background-color:hsl(90, 80%, 50%);}
.imgCov        {                -webkit-mask-image: radial-gradient(black 60%, transparent 75%);                -webkit-mask-size: cover;}
}
</style>
<div id="oBlk">
<svg viewBox="0 0 1000 660" xmlns="http://www.w3.org/2000/svg" id="svgObj">
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkZQENTd1NiafNWuneWTxkLoL52eoKAR5I1cCsmQumUjK60bkZVWWWnqQ/640" x='0' y="0" width="500" height="360" preserveAspectRatio="none" />
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkEPFQkftv3HPkkEcyZ4CGXzwGoG0lXCRVXWibOTdtFODREY85cEMwczg/640" x='500' y="0" width="500" height="360" preserveAspectRatio="none" />
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkkeJRNFxTVyyIxn0wFjaO9iaEh96wC9jJOJYia0aqpk38YPnZqVWh7nog/640" x='0' y="330" width="500" height="360" preserveAspectRatio="none" />
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkltoIsLjbPANZiasKLeicqSakkpdialYm14FOkNvNFVyuiaYibXQmiaRKfyHQ/640" x='500' y="330" width="500" height="360" preserveAspectRatio="none" />

<image class="imgCov" xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkZQENTd1NiafNWuneWTxkLoL52eoKAR5I1cCsmQumUjK60bkZVWWWnqQ/640" opacity='0' x='0' y="0" width="500" height="360" preserveAspectRatio="none" >
        <set attributeName="opacity" to="1"begin="pb0.begin"></set>
        <animate id="pb0" attributename="width" begin="0; pe3.end+1" from='500' to='1000' dur='2s' fill="freeze" />
        <animate attributename="height" begin="pb0.begin" from='360' to='720' dur='2s' fill="freeze" />
        <animate attributename="width" begin="pb0.begin+8" from='1000' to='500' dur='2s' fill="freeze" />
        <animate id="pe0" attributename="height" begin="pb0.begin+8" from='720' to='360' dur='2s' fill="freeze" />
        <set attributeName="opacity" to="0"begin="pe0.end"></set>
</image>
<image class="imgCov" xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkEPFQkftv3HPkkEcyZ4CGXzwGoG0lXCRVXWibOTdtFODREY85cEMwczg/640" opacity='0' x='500' y="0" width="500" height="360" preserveAspectRatio="none" >
        <set attributeName="opacity" to="1"begin="pb1.begin"></set>
        <animate id="pb1" attributename="width" begin="pe0.end+1" from='500' to='1000' dur='2s' fill="freeze" />
        <animate attributename="height" begin="pb1.begin" from='360' to='720' dur='2s' fill="freeze" />
        <animate attributename="x" begin="pb1.begin" from='500' to='0' dur='2s' fill="freeze" />
       
        <animate attributename="x" begin="pb1.begin+8" from='0' to='500' dur='2s' fill="freeze" />
        <animate attributename="width" begin="pb1.begin+8" from='1000' to='500' dur='2s' fill="freeze" />
        <animate id="pe1" attributename="height" begin="pb1.begin+8" from='720' to='360' dur='2s' fill="freeze" />
        <set attributeName="opacity" to="0"begin="pe1.end"></set>
</image>
<image class="imgCov" xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkkeJRNFxTVyyIxn0wFjaO9iaEh96wC9jJOJYia0aqpk38YPnZqVWh7nog/640" opacity='0' x='0' y="330" width="500" height="360" preserveAspectRatio="none" >
        <set attributeName="opacity" to="1"begin="pb2.begin"></set>
        <animate id="pb2" attributename="width" begin="pe1.end+1" from='500' to='1000' dur='2s' fill="freeze" />
        <animate attributename="height" begin="pb2.begin" from='360' to='720' dur='2s' fill="freeze" />
        <animate attributename="y" begin="pb2.begin" from='330' to='0' dur='2s' fill="freeze" />
       
        <animate attributename="y" begin="pb2.begin+8" from='0' to='330' dur='2s' fill="freeze" />
        <animate attributename="width" begin="pb2.begin+8" from='1000' to='500' dur='2s' fill="freeze" />
        <animate id="pe2" attributename="height" begin="pb2.begin+8" from='720' to='360' dur='2s' fill="freeze" />
        <set attributeName="opacity" to="0"begin="pe2.end"></set>
</image>
<image class="imgCov" xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QgaCyhTdqAYXn8hWI85xZkltoIsLjbPANZiasKLeicqSakkpdialYm14FOkNvNFVyuiaYibXQmiaRKfyHQ/640" opacity='0' x='500' y="330" width="500" height="360" preserveAspectRatio="none" >
        <set attributeName="opacity" to="1"begin="pb3.begin"></set>
        <animate id="pb3" attributename="width" begin="pe2.end+1" from='500' to='1000' dur='2s' fill="freeze" />
        <animate attributename="height" begin="pb3.begin" from='360' to='720' dur='2s' fill="freeze" />
        <animate attributename="y" begin="pb3.begin" from='330' to='0' dur='2s' fill="freeze" />
        <animate attributename="x" begin="pb3.begin" from='500' to='0' dur='2s' fill="freeze" />
       
        <animate attributename="y" begin="pb3.begin+8" from='0' to='330' dur='2s' fill="freeze" />
        <animate attributename="x" begin="pb3.begin+8" from='0' to='500' dur='2s' fill="freeze" />
        <animate attributename="width" begin="pb3.begin+8" from='1000' to='500' dur='2s' fill="freeze" />
        <animate id="pe3" attributename="height" begin="pb3.begin+8" from='720' to='360' dur='2s' fill="freeze" />
        <set attributeName="opacity" to="0"begin="pe3.end"></set>
</image>
</svg>
<audio id='aud' src="https://cccimg.com/view.php/59b83b834f144b7df50da248d64c38d1.mp3" loop autoplay ></audio>
</div>
<script>
oBlk.onclick = () => aud.paused ? (aud.play(),svgObj.unpauseAnimations()) : (aud.pause(),svgObj.pauseAnimations()) ;
</script>

红影 发表于 2024-10-2 21:41

每个图片都单独浮现出来，漂亮的金黄色的花蕊，把桂花的美带到了眼前。
欣赏难难好帖{:4_199:}

红影 发表于 2024-10-2 21:43

浮动出来的图片还被剪切成了椭圆，让下面其他的图片不被遮挡。
点击帖子还能暂停，这个制作真好，仿佛隔屏嗅到了桂花香{:4_187:}

起个网名好难 发表于 2024-10-2 21:45

红影 发表于 2024-10-2 21:41
每个图片都单独浮现出来，漂亮的金黄色的花蕊，把桂花的美带到了眼前。
欣赏难难好帖

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-10-2 21:48

红影 发表于 2024-10-2 21:43
浮动出来的图片还被剪切成了椭圆，让下面其他的图片不被遮挡。
点击帖子还能暂停，这个制作真好，仿佛隔屏 ...

因为觉得方正的图片有些生硬。

红影 发表于 2024-10-2 23:04

起个网名好难 发表于 2024-10-2 21:45


难难是自己设计的代码呢，厉害{:4_187:}

红影 发表于 2024-10-2 23:04

起个网名好难 发表于 2024-10-2 21:48
因为觉得方正的图片有些生硬。

是的，还是这样椭圆的好{:4_204:}

起个网名好难 发表于 2024-10-3 06:15

红影 发表于 2024-10-2 23:04
难难是自己设计的代码呢，厉害

一般般吧

起个网名好难 发表于 2024-10-3 06:31

红影 发表于 2024-10-2 23:04
是的，还是这样椭圆的好

https://p0.itc.cn/q_70/images03/20210117/dcf5d0f724f246c4ab24f023038f0749.gif

红影 发表于 2024-10-3 11:42

起个网名好难 发表于 2024-10-3 06:15
一般般吧

自创的就比我这样套用的强太多了{:4_199:}

红影 发表于 2024-10-3 11:44

起个网名好难 发表于 2024-10-3 06:31


难难的动图都好看，谢谢{:4_187:}

起个网名好难 发表于 2024-10-3 12:11

红影 发表于 2024-10-3 11:42
自创的就比我这样套用的强太多了

仅一步之遥

起个网名好难 发表于 2024-10-3 12:13

红影 发表于 2024-10-3 11:44
难难的动图都好看，谢谢

那就再来一个{:5_106:}

http://p4.itc.cn/q_70/images03/20210115/7e1aa7a9fb92412f9de7172182837251.gif

红影 发表于 2024-10-3 12:45

起个网名好难 发表于 2024-10-3 12:11
仅一步之遥

这一步难如天堑{:4_173:}

红影 发表于 2024-10-3 12:46

起个网名好难 发表于 2024-10-3 12:13
那就再来一个

这个真好{:4_187:}

起个网名好难 发表于 2024-10-3 13:17

红影 发表于 2024-10-3 12:45
这一步难如天堑

太夸张了

起个网名好难 发表于 2024-10-3 13:18

红影 发表于 2024-10-3 12:46
这个真好

这个要自己做才真的难

梦江南 发表于 2024-10-3 16:53

桂花又香了！感慨哦！{:4_199:}

起个网名好难 发表于 2024-10-3 17:28

梦江南 发表于 2024-10-3 16:53
桂花又香了！感慨哦！

是的， 小区里每年到这个时候就桂花飘香{:5_106:}

红影 发表于 2024-10-3 20:00

起个网名好难 发表于 2024-10-3 13:17
太夸张了

真的啊，或者因为我习惯套用了{:4_173:}

查看完整版本: 金秋桂花香