论坛 › 动画音画 › 江南春

起个网名好难 发表于 2023-3-17 11:19

江南春

本帖最后由 起个网名好难 于 2023-3-22 09:12 编辑 <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://oss-product-img.artfoxlive.com/202108/1629704670857_6388416.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://s1.ax1x.com/2023/03/21/ppaMQBt.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://s1.ax1x.com/2023/03/21/ppaMPn1.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://s1.ax1x.com/2023/03/21/ppaM9XR.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://s1.ax1x.com/2023/03/21/ppaMMnI.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://s1.ax1x.com/2023/03/21/ppaMS1J.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://s1.ax1x.com/2023/03/21/ppaMF76.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://s1.ax1x.com/2023/03/21/ppaMAAK.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://s1.ax1x.com/2023/03/21/ppaMEtO.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://s1.ax1x.com/2023/03/21/ppaMe9e.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://s1.ax1x.com/2023/03/21/ppaMVhD.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://s1.ax1x.com/2023/03/21/ppaMm1H.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://s1.ax1x.com/2023/03/21/ppaMncd.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="http://music.163.com/song/media/outer/url?id=2013172422.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-3-17 12:51

沙发我的

小辣椒 发表于 2023-3-17 12:52

欣赏难难的精彩制作{:4_178:}

小辣椒 发表于 2023-3-17 12:53

也是红星按钮{:4_199:}

起个网名好难 发表于 2023-3-17 13:26

小辣椒 发表于 2023-3-17 12:51
沙发我的

谢谢支持鼓励

起个网名好难 发表于 2023-3-17 13:28

小辣椒 发表于 2023-3-17 12:53
也是红星按钮

如果有歌词就可以不要按钮， 这帖用的纯音乐只好加个按钮控制启停。

小辣椒 发表于 2023-3-17 13:38

起个网名好难 发表于 2023-3-17 13:28
如果有歌词就可以不要按钮， 这帖用的纯音乐只好加个按钮控制启停。

红星按钮很漂亮

起个网名好难 发表于 2023-3-17 15:49

小辣椒 发表于 2023-3-17 13:38
红星按钮很漂亮

谢谢， 还凑合吧。

马黑黑 发表于 2023-3-17 19:02

好风景

起个网名好难 发表于 2023-3-17 19:26

马黑黑 发表于 2023-3-17 19:02
好风景

谢谢支持与欣赏

https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190617/d951c0490e5c491b81fd800633da3e01.gif

马黑黑 发表于 2023-3-17 19:30

起个网名好难 发表于 2023-3-17 19:26
谢谢支持与欣赏

{:4_191:}

红影 发表于 2023-3-17 20:08

好漂亮的图片轮播，里面的场景真的太美了{:4_199:}

起个网名好难 发表于 2023-3-17 20:53

红影 发表于 2023-3-17 20:08
好漂亮的图片轮播，里面的场景真的太美了

谢谢支持与欣赏

https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190617/d951c0490e5c491b81fd800633da3e01.gif

起个网名好难 发表于 2023-3-17 20:56

马黑黑 发表于 2023-3-17 19:30


https://img.gif8.com/doutu/images/sina6/9150e4e5gy1gcubtncezug204q04qdfu.gif

红影 发表于 2023-3-17 20:56

起个网名好难 发表于 2023-3-17 20:53
谢谢支持与欣赏

这个动图色彩好漂亮{:4_204:}

起个网名好难 发表于 2023-3-17 21:04

红影 发表于 2023-3-17 20:56
这个动图色彩好漂亮

感觉有点假{:5_117:}

红影 发表于 2023-3-17 21:23

起个网名好难 发表于 2023-3-17 21:04
感觉有点假

据说漂亮的蘑菇都是有毒的{:4_189:}

起个网名好难 发表于 2023-3-17 21:29

红影 发表于 2023-3-17 21:23
据说漂亮的蘑菇都是有毒的

是花骨朵吧，没太注意细看

马黑黑 发表于 2023-3-17 21:38

起个网名好难 发表于 2023-3-17 20:56


干杯

红影 发表于 2023-3-17 22:46

起个网名好难 发表于 2023-3-17 21:29
是花骨朵吧，没太注意细看

我咋看着像小蘑菇{:4_189:}

查看完整版本: 江南春