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

《画你》文屿 （电子琴）

本帖最后由 焱鑫磊 于 2023-4-4 21: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/642a9960a682492fcc4a5e3f.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/642a55cfa682492fccde2169.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/642a55e9a682492fccde3f70.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/642a5603a682492fccde5f4b.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/642a9c3ba682492fcc4e0cf4.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/642a5634a682492fccdeb692.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/642a564fa682492fccdee040.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/642a566ba682492fccdf0e46.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/642a5686a682492fccdf3907.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/642a56a0a682492fccdf623a.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/642a56c6a682492fccdf8892.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/642a56e6a682492fccdfe048.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/642a5703a682492fcce0107d.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.kumeiwp.com/sub/filestores/2023/04/04/f3ca07ecbe0b873458d294c53bf06d3d.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>
https://www.joy127.com/url/102955.mp3
https://www.kumeiwp.com/sub/filestores/2023/04/04/f3ca07ecbe0b873458d294c53bf06d3d.mp3

樵歌 发表于 2023-4-3 17:42

俺最喜欢这曲儿了，往往简单的就是最好的，比如李白的诗歌，用的自然的平常语言，而营造的意境却是千古绝唱！

樵歌 发表于 2023-4-3 17:42

第一段落有点卡的样纸。

红影 发表于 2023-4-3 19:25

又是漂亮的图片轮转，心形播放器按钮按下能让当中轮播的图片消失，帖子里的选图真美。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-4-3 21:41

红影 发表于 2023-4-3 19:25
又是漂亮的图片轮转，心形播放器按钮按下能让当中轮播的图片消失，帖子里的选图真美。欣赏焱鑫磊好帖{:4_19 ...

音乐有卡顿现象，考虑是音乐网站有点儿问题。问候红影好！{:4_187:}

焱鑫磊 发表于 2023-4-3 22:04

樵歌 发表于 2023-4-3 17:42
俺最喜欢这曲儿了，往往简单的就是最好的，比如李白的诗歌，用的自然的平常语言，而营造的意境却是千古绝唱 ...

问候樵歌好！{:4_187:}

焱鑫磊 发表于 2023-4-3 22:05

樵歌 发表于 2023-4-3 17:42
第一段落有点卡的样纸。

考虑是音乐网站问题。

马黑黑 发表于 2023-4-3 22:14

毛玻璃效果相当不错

小辣椒 发表于 2023-4-3 22:15

127的音乐就这样，以前收钱还可以，现在不行的

小辣椒 发表于 2023-4-3 22:16

图图很美，也是很喜欢难难这个图片个特效代码{:4_199:}

焱鑫磊 发表于 2023-4-3 23:40

马黑黑 发表于 2023-4-3 22:14
毛玻璃效果相当不错

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

焱鑫磊 发表于 2023-4-3 23:41

小辣椒 发表于 2023-4-3 22:15
127的音乐就这样，以前收钱还可以，现在不行的

问候小辣椒晚上好！{:4_187:}

焱鑫磊 发表于 2023-4-3 23:43

小辣椒 发表于 2023-4-3 22:16
图图很美，也是很喜欢难难这个图片个特效代码

问候小辣椒好！{:4_204:}能否告知一个稳定上传音乐的网站？谢谢！

马黑黑 发表于 2023-4-4 06:57

焱鑫磊 发表于 2023-4-3 23:40
问候老师好！

早上好

樵歌 发表于 2023-4-4 18:32

焱鑫磊 发表于 2023-4-3 22:04
问候樵歌好！

焱大美女好{:4_204:}

樵歌 发表于 2023-4-4 18:33

焱鑫磊 发表于 2023-4-3 22:05
考虑是音乐网站问题。

嗯，可能网有起床期反映{:4_173:}

红影 发表于 2023-4-4 20:21

焱鑫磊 发表于 2023-4-3 21:41
音乐有卡顿现象，考虑是音乐网站有点儿问题。问候红影好！

这会听起来很流畅呢，好听{:4_187:}

小辣椒 发表于 2023-4-4 22:10

焱鑫磊 发表于 2023-4-3 23:43
问候小辣椒好！能否告知一个稳定上传音乐的网站？谢谢！

问好焱鑫磊 ，花潮论坛以前分享过好多免费上传音乐的空间和网站，但免费的总是不靠谱，最后就链接失效。

上次你们上传365的是风中飞尘的收费空间，他本来想就花潮几个朋友上传也是没有问题，结果上传的人太多，空间一下子60% 了 不得已只能暂时关闭。

我一直都是收费空间，玩了许多年了。就是收费空间你今年买了，有链接，明年不续费链接一样失效的，所以玩这个也是烧钱的{:4_170:}

焱鑫磊 发表于 2023-4-5 02:42

小辣椒 发表于 2023-4-4 22:10
问好焱鑫磊 ，花潮论坛以前分享过好多免费上传音乐的空间和网站，但免费的总是不靠谱，最后就链接失效。
...

谢谢小辣椒告知！{:4_187:}
页: [1]
查看完整版本: 《画你》文屿 （电子琴）