焱鑫磊 发表于 2023-4-3 09:08

烟雨江南

本帖最后由 焱鑫磊 于 2023-4-3 09:17 编辑 <br /><br /><style>
#svgf {
        width:640px;margin:12px auto;
        overflow:hidden;border-radius:24px;
        box-shadow:2px 2px 8px black;
}
#bkframe        {
        width:720px;background:#ccf url(https://pic.imgdb.cn/item/641d932aa682492fccf1ca2c.jpg) no-repeat center/cover;display:grid;place-items:center;padding:32px;
        overflow:hidden;border-radius:24px;margin:24px auto;
        box-shadow:2px 2px 8px black;position:relative;
}
@keyframes turn        {from{transform:rotate(0deg);}         to{transform:rotate(360deg) ;}}
    #audCtrl{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
    .heart{
      width: 30px;
      height: 30px;
      background-color: red;
      position: relative;cursor:pointer;
      transform: rotate(45deg);
                animation: heartbeat .8s infinite alternate;
                filter: drop-shadow(0px 0px 10px pink);
    }
    .heart::before,.heart::after{
      content: "";
      width: 30px;
      height: 30px;
      background-color: red;
      position: absolute;
      border-radius: 50%;
    }
    .heart::before{
      left: -18px;
    }
    .heart::after{
      top: -18px;
    }
@keyframes heartbeat { to { transform: rotate(45deg) scale(0.9); } }
</style>
<div id="bkframe">
<div id="svgf">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 640 1024" id="svgContent">
<defs>
<pattern id="pm7" width="200" height="200" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="100" height="100" fill="white"></rect>
<rect x="100" y="0" width="100" height="100" fill="black">
<animate attributeName="fill" from="black" to="white" begin="bpic3.begin;bpic8.begin;bpic10.begin;" dur="3" fill="freeze"></animate>
</rect>
<rect x="0" y="100" width="100" height="100" fill="black">
<animate attributeName="fill" from="black" to="white" begin="bpic3.begin;bpic8.begin;bpic10.begin;" dur="3" fill="freeze"></animate>
</rect>
<rect x="100" y="100" width="100" height="100" fill="white"></rect>
</pattern>
<mask id="mask7" x="0" y="0" width="640" height="1024">
<rect y="0" width="640" height="1024" style="fill:url(#pm7)"></rect>
</mask>

<pattern id="pm8" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="0" height="50" fill="white">
<animate attributeName="width" from="0" to="50" begin="bpic4.begin;" dur="3" fill="freeze"></animate>
</rect>
</pattern>
<mask id="mask8" x="0" y="0" width="640" height="1024">
<rect y="0" width="640" height="1024" style="fill:url(#pm8)"></rect>
</mask>
<pattern id="pm9" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="0" fill="white">
<animate attributeName="height" from="0" to="50" begin="bpic1.begin;bpic5.begin;bpic6.begin;bpic9.begin;bpic11.begin;" dur="3" fill="freeze"></animate>
</rect>
</pattern>
<mask id="mask9" x="0" y="0" width="640" height="1024">
<rect y="0" width="640" height="1024" style="fill:url(#pm9)"></rect>
</mask>
<pattern id="pm10" width="200" height="100" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0 100%, 100% 0);"></rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 100%, 100% 100%);">
<animate attributeName="fill" from="black" to="white" begin="bpic0.begin;" dur="3" fill="freeze"></animate>
</rect>
</pattern>
<mask id="mask10" x="0" y="0" width="640" height="1024">
<rect y="0" width="640" height="1024" style="fill:url(#pm10)"></rect>
</mask>
<pattern id="pm11" width="200" height="100" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0% 100%, 100% 100%);"></rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 0, 100% 100%);">
<animate attributeName="fill" from="black" to="white" begin="bpic2.begin;bpic7.begin;" dur="3" fill="freeze"></animate>
</rect>
</pattern>
<mask id="mask11" x="0" y="0" width="640" height="1024">
<rect y="0" width="640" height="1024" style="fill:url(#pm11)"></rect>
</mask>
</defs>

<image xlink:href="https://pic.imgdb.cn/item/641d8940a682492fccdf4511.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask10)">
<animate id="bpic0" attributeName="opacity" from="0" to="1" begin="0;epic11.end-3" dur="2" fill="freeze"></animate>
<animate id="epic0" attributeName="opacity" from="1" to="0" begin="bpic0.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d895fa682492fccdf7593.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic1" attributeName="opacity" from="0" to="1" begin="epic0.end-3" dur="2" fill="freeze"></animate>
<animate id="epic1" attributeName="opacity" from="1" to="0" begin="bpic1.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d897ca682492fccdf9f3b.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask11)">
<animate id="bpic2" attributeName="opacity" from="0" to="1" begin="epic1.end-3" dur="2" fill="freeze"></animate>
<animate id="epic2" attributeName="opacity" from="1" to="0" begin="bpic2.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8997a682492fccdfdcc9.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask7)">
<animate id="bpic3" attributeName="opacity" from="0" to="1" begin="epic2.end-3" dur="2" fill="freeze"></animate>
<animate id="epic3" attributeName="opacity" from="1" to="0" begin="bpic3.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8b49a682492fcce34d34.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask8)">
<animate id="bpic4" attributeName="opacity" from="0" to="1" begin="epic3.end-3" dur="2" fill="freeze"></animate>
<animate id="epic4" attributeName="opacity" from="1" to="0" begin="bpic4.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8b6aa682492fcce3b219.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic5" attributeName="opacity" from="0" to="1" begin="epic4.end-3" dur="2" fill="freeze"></animate>
<animate id="epic5" attributeName="opacity" from="1" to="0" begin="bpic5.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8b86a682492fcce40e6b.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic6" attributeName="opacity" from="0" to="1" begin="epic5.end-3" dur="2" fill="freeze"></animate>
<animate id="epic6" attributeName="opacity" from="1" to="0" begin="bpic6.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8ba0a682492fcce46074.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask11)">
<animate id="bpic7" attributeName="opacity" from="0" to="1" begin="epic6.end-3" dur="2" fill="freeze"></animate>
<animate id="epic7" attributeName="opacity" from="1" to="0" begin="bpic7.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8d52a682492fcce8166e.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask7)">
<animate id="bpic8" attributeName="opacity" from="0" to="1" begin="epic7.end-3" dur="2" fill="freeze"></animate>
<animate id="epic8" attributeName="opacity" from="1" to="0" begin="bpic8.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8d74a682492fcce8482c.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic9" attributeName="opacity" from="0" to="1" begin="epic8.end-3" dur="2" fill="freeze"></animate>
<animate id="epic9" attributeName="opacity" from="1" to="0" begin="bpic9.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8d90a682492fcce87107.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask7)">
<animate id="bpic10" attributeName="opacity" from="0" to="1" begin="epic9.end-3" dur="2" fill="freeze"></animate>
<animate id="epic10" attributeName="opacity" from="1" to="0" begin="bpic10.begin+8" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://pic.imgdb.cn/item/641d8da5a682492fcce896ed.jpg" opacity="0" x="0" y="0" width="640" height="1024" preserveAspectRatio="none" mask="url(#mask9)">
<animate id="bpic11" attributeName="opacity" from="0" to="1" begin="epic10.end-3" dur="2" fill="freeze"></animate>
<animate id="epic11" attributeName="opacity" from="1" to="0" begin="bpic11.begin+8" dur="2" fill="freeze"></animate>
</image>

</svg>
</div>
<!-- div id="audCtrl"><img src="https://cdnimg101.mlychee.com/audio_cover/2016/06/20/29371244203112711_160x160.jpg"></div -->
                        <div id="audCtrl">
                                <div class="heart"></div>
                        </div>
<audio src="https://www.joy127.com/url/102394.mp3" loop autoplay id="ma" ></audio>
</div>
<script>
let audCtrl = document.querySelector('.heart');

let setState = (condi) =>        {
        if(condi)        {
                audCtrl.style.animationPlayState='running';
                svgContent.unpauseAnimations();
                svgf.style.visibility="visible";
                ma.play();
        }
        else {
                audCtrl.style.animationPlayState='paused';
                svgContent.pauseAnimations();
                svgf.style.visibility="hidden";
                ma.pause();
        }
};
audCtrl.onclick = () => setState(ma.paused);
setState(ma.played);

</script>

近朱者赤 发表于 2023-4-3 09:15

点赞{:4_187:}

焱鑫磊 发表于 2023-4-3 09:18

近朱者赤 发表于 2023-4-3 09:15
点赞

问候老师好！{:4_204:}

非常开心 发表于 2023-4-3 09:20

老师制作的非常漂亮{:4_187:}

红影 发表于 2023-4-3 09:38

图片轮转特效特别炫，图片的选择也都很漂亮。点击心形播放器还能让当中的小图收掉。非常漂亮的制作。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-4-3 11:02

非常开心 发表于 2023-4-3 09:20
老师制作的非常漂亮

问候朋友好！{:4_187:}

焱鑫磊 发表于 2023-4-3 11:03

红影 发表于 2023-4-3 09:38
图片轮转特效特别炫，图片的选择也都很漂亮。点击心形播放器还能让当中的小图收掉。非常漂亮的制作。欣赏焱 ...

问候红影好！{:4_204:}

樵歌 发表于 2023-4-3 12:34

这个太漂亮了！真是牛！

梦缘 发表于 2023-4-3 15:54

制作精美，感谢分享，欣赏问好！{:4_204:}

红影 发表于 2023-4-3 16:05

焱鑫磊 发表于 2023-4-3 11:03
问候红影好！

问好焱鑫磊，新周快乐{:4_187:}

焱鑫磊 发表于 2023-4-3 17:20

樵歌 发表于 2023-4-3 12:34
这个太漂亮了！真是牛！

问候朋友好！{:4_187:}

焱鑫磊 发表于 2023-4-3 17:20

梦缘 发表于 2023-4-3 15:54
制作精美，感谢分享，欣赏问好！

问候朋友好！{:4_204:}

樵歌 发表于 2023-4-3 18:20

焱鑫磊 发表于 2023-4-3 17:20
问候朋友好！

问候焱大才女好{:4_187:}
页: [1]
查看完整版本: 烟雨江南