论坛 › 欢乐水吧 › 太湖春（套用黑黑追逐效果）

小辣椒 发表于 2022-10-24 20:52

太湖春（套用黑黑追逐效果）

<style>
#papa { margin: auto; left: -220px; width: 1024px; height: 670px; top:120px; background: url('https://wj.zp68.com/lxx/yunhua/2022/10/24/GIF2.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#papa::before { position: absolute; content: ''; background: url('https://wj.zp68.com/lxx/yunhua/2022/10/24/001.gif'); left: 400px; top: 100px; width:200px; height: 200px; border-radius: 50%; mix-blend-mode: screen; animation: rot 5s infinite; }
#tit { position: absolute; font: bold 3em sans-serif; color: #ccc; top: 20px; right: 30px; text-shadow: 2px 2px 4px #000; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
      <span id="tit">太<br>湖<br>春</span>
      <svg id="mplayer" width="360" height="60" style="position: absolute; bottom: 40;">
                <rect x="50" y="25" rx="6" ry="6" width="200" height="12" stroke="hsla(280,90%,55%,.45)" fill="hsla(60,100%,100%,.65)" id="track" />
                <rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="url(#bgcolor)" stroke-opacity=".45" id="prog" />
                <text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="DarkRed" id="audtime">00:00 | 00:00</text>
                <circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
                        <animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
                </circle>
                <defs>
                        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="bgcolor">
                              <stop offset="0%" style="stop-color: red; stop-opacity:0.8" />
                              <stop offset="100%" style="stop-color: yellow; stop-opacity:0.75" />
                        </linearGradient>
                </defs>
      </svg>
</div>

<script>
(function() {
      let mp = { len: track.getAttribute('width')*1, x: track.getAttribute('x')*1 }, aud = new Audio();
      aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/10/24/ths.mp3';
      aud.loop = true;
      aud.autoplay = true;
      if(aud.paused) mplayer.pauseAnimations();
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - mp.x) / mp.len;
      aud.addEventListener('seeked', () => mState());
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('timeupdate', () => {prog.style.setProperty('width', aud.currentTime * mp.len / aud.duration < 6 ? 6 : aud.currentTime * mp.len / aud.duration+ 'px');audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
      let mState = () => aud.paused ? mplayer.pauseAnimations() : mplayer.unpauseAnimations();
      let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
})();
</script>
<br><br><br><br><br><br>

小辣椒 发表于 2022-10-24 20:54

@马黑黑

黑黑 套用一个效果，就改了一下音乐时间的颜色和小动图位置。。。。

小辣椒 发表于 2022-10-24 20:55

明天早上有事出去，今天想早下，不修改其他了

小辣椒 发表于 2022-10-24 20:55

谢谢黑黑的教程分享，非常美的效果

起个网名好难 发表于 2022-10-24 21:02

<svg width="100%" height="100%" viewBox="0 0 1000 600"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
   <path id="MyPath"
         d="
      M 200 200
      m -100, 150
      a 300,200 0 1,0 600,0
      a 300,200 0 1,0 -600,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
    <textPath xlink:href="#MyPath">
      欣赏、点赞！
             <animate attributeName="startOffset" from="0" to ="1656" begin="0s" dur="10s" repeatCount="indefinite" />

    </textPath>
</text>
</svg>

小辣椒 发表于 2022-10-24 21:05

起个网名好难 发表于 2022-10-24 21:02
欣赏、点赞！

<svg width="100%" height="100%" viewBox="0 0 1000 600"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
   <path id="MyPath"
         d="
      M 200 200
      m -100, 150
      a 300,200 0 1,0 600,0
      a 300,200 0 1,0 -600,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
    <textPath xlink:href="#MyPath">
      这样回帖累不累啊
             <animate attributeName="startOffset" from="0" to ="1656" begin="0s" dur="10s" repeatCount="indefinite" />

    </textPath>
</text>
</svg>

千羽 发表于 2022-10-24 21:06

小辣椒的作业完成得太漂亮了，音乐也好听{:4_187:}

起个网名好难 发表于 2022-10-24 21:07

小辣椒 发表于 2022-10-24 21:05
这样回帖累不累啊

最省力的回帖是上张图片，据说是不允许{:5_102:}

小辣椒 发表于 2022-10-24 21:07

千羽 发表于 2022-10-24 21:06
小辣椒的作业完成得太漂亮了，音乐也好听

千羽又夸小辣椒，我会难为情的，就是套用黑黑的代码，你现在去套用一个，很快的

小辣椒 发表于 2022-10-24 21:09

起个网名好难 发表于 2022-10-24 21:07
最省力的回帖是上张图片，据说是不允许

最好是给出文字的点评，可以大家交流学习

起个网名好难 发表于 2022-10-24 21:11

小辣椒 发表于 2022-10-24 21:09
最好是给出文字的点评，可以大家交流学习

文字就是“欣赏、点赞”

千羽 发表于 2022-10-24 21:13

两个高科技元素都挺好看，色调也配的漂亮{:4_185:}

千羽 发表于 2022-10-24 21:13

小辣椒 发表于 2022-10-24 21:07
千羽又夸小辣椒，我会难为情的，就是套用黑黑的代码，你现在去套用一个，很快的

哈哈，明天有时间的{:4_173:}

小辣椒 发表于 2022-10-24 21:15

千羽 发表于 2022-10-24 21:13
哈哈，明天有时间的

那就明天做

千羽 发表于 2022-10-24 21:16

小辣椒 发表于 2022-10-24 21:15
那就明天做

嗯，争取哈，还不知道会不会做呢{:4_203:}

小辣椒 发表于 2022-10-24 21:22

千羽 发表于 2022-10-24 21:16
嗯，争取哈，还不知道会不会做呢

这个你应该会

醉美水芙蓉 发表于 2022-10-24 21:29

马黑黑 发表于 2022-10-24 22:17

很活泼的样纸，构思绝妙

红影 发表于 2022-10-24 22:20

背景的动图很大气，非常漂亮的制作，亲爱的真棒{:4_199:}

马黑黑 发表于 2022-10-25 07:19

烟花改造的好

查看完整版本: 太湖春（套用黑黑追逐效果）