亚伦影音工作室 发表于 2024-9-30 19:13

控制SVG动画[变色字]效果

本帖最后由 亚伦影音工作室 于 2024-9-30 21:15 编辑 <br /><br /><style type="text/css">
#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/66828bb4d9c307b7e9d49700.jpg)no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#mysvg{ position: absolute;left: 10%; top: 40%;cursor: pointer;width: 90%; height: 160px;}
#mplayer {position: absolute;
      top:90%; left:40px;z-index: 21;
      width: 60px;
      height: 60px;
      cursor: pointer;transition: 0.5s all ease;
}
.pink {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/6434c8860d2dde5777f15c6a.png')no-repeat center/cover;}
.purple {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/6434ca740d2dde5777f40632.png')no-repeat center/cover;}

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 30px;
      left:92%;}
#prog {position: absolute;z-index: 8;
      width: 82%;
      height: 1.5px;
      cursor: pointer;
         bottom: 35px;
left:9%;
border-radius: 1px;}
</style>
<div id="papa">
<div id="mplayer" class="pink" > </div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<svg   id="mysvg">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="-3" dy="-3" stdDeviation="2" flood-color="#000" flood-opacity=".6"/>
                </filter>
        </defs>
        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#ff0" stroke="none" font-family="'楷体'" font-weight="bold" font-size="70" font-weight="bold" filter="url(#shadow)">亚伦祝花潮论坛亲人们节日快乐！
                <animate attributeName="fill" values="#ff0;#00ff00;#ff0" dur="2s" repeatCount="indefinite" />
        </text>       
</svg>
</div>
<audio id="aud" src="https://s1.krakenfiles.com/uploads/24-09-2024/7GBsbQJuTv/music.m4a" autoplay="" loop="loop"></audio>
<script>


aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),mysvg.unpauseAnimations()) :(aud.pause(),mplayer.classList.add('purple'),mysvg.pauseAnimations()));

/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 '+ aud.currentTime / aud.duration * 100 + '%, #eeeeee 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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>

红影 发表于 2024-9-30 21:08

这变色文字真漂亮，感谢亚伦老师的美好祝福，也祝福你节日快乐{:4_199:}{:4_177:}

小辣椒 发表于 2024-10-1 00:46

欣赏亚伦的精彩制作{:4_187:}

小辣椒 发表于 2024-10-1 00:46

国庆节快乐！

樵歌 发表于 2024-10-1 07:02

同祝亚伦老师节日快乐！{:4_176:}

起个网名好难 发表于 2024-10-1 09:02


<svg width='600' view="0 0 600 100">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000" flood-opacity=".6"/>
                </filter>
        </defs>
        <text x="300" y="50" text-anchor="middle" dominant-baseline="middle" fill="#fff" stroke="none" font-family="sans-serif" font-weight="bold" font-size="50" font-weight="bold" filter="url(#shadow)">节日快乐！
                <animate attributeName="fill" values="red;orange;yellow;green;cyan;blue;purple" dur="14s" repeatCount="indefinite" />
        </text>       
</svg>
页: [1]
查看完整版本: 控制SVG动画[变色字]效果