亚伦影音工作室 发表于 2024-10-1 18:42

测试控制svg字

本帖最后由 亚伦影音工作室 于 2024-10-1 18:57 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://file.moyublog.com/d/file/2024-02-12/8705aff83ec4a06486514c7f37008a6d.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;}

#mplayer {position: absolute;
      top:70%; left:40px;z-index: 21;
      width: 220px;
      height: 220px;
      cursor: pointer;transition: 0.5s all ease;
}
.pink {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif')no-repeat center/cover;}
.purple {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png')no-repeat center/cover;}

.svg {position: absolute;
      top:10%; left:18%;z-index: 21;}
.text {
        fill: none;
        stroke-width: 1.5;
        stroke-dasharray: 0 200;
        stroke-dashoffset: 0;font:bold 5em/0em 微软雅黑;
        filter: drop-shadow(0 0 0px #333);
}
.text:nth-child(3n + 1) {
        stroke: #fff;
        animation: stroke1 6s infinite alternate;
}

.stop .text:nth-child(3n + 1){animation-play-state: paused;}
.text:nth-child(3n + 2) {
        stroke: #fff;
        animation: stroke2 6s infinite alternate;
}
.stop .text:nth-child(3n + 2){animation-play-state: paused;}
.text:nth-child(3n + 3) {
        stroke: #fff;
        animation: stroke3 6s infinite alternate;
}
.stop .text:nth-child(3n + 3){animation-play-state: paused;}
@keyframes stroke1 {
        to { stroke-dasharray: 80 160; stroke-dashoffset: 1000; }
}
@keyframes stroke2 {
        to { stroke-dasharray: 80 160; stroke-dashoffset: 1080; }
}
@keyframes stroke3 {
        to { stroke-dasharray: 80 160; stroke-dashoffset: 1160; }
}
</style>
<div id="papa">
<div id="mplayer" class="pink" > </div>
<div id="testImg" >
<svg width="90%" height="200" viewBox="0 0 90% 200" class="svg">
        <symbol id="hc">
                <text text-anchor="middle" x="50%" y="35%" dy="60px">一场梦的记忆</text>
        </symbol>
        <use href="#hc" class="text"></use>
        <use href="#hc" class="text"></use>
        <use href="#hc" class="text"></use>
</svg>
</div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/a8/10/69/9a4d0f9fafa8956302db8c8b5e13c5ba/audio.mp3" autoplay="" loop="loop"></audio>
</div>
<script>


var image= document.getElementById("testImg");
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

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

</script>

红影 发表于 2024-10-1 20:29

果然能暂停文字描边效果呢，亚伦老师厉害{:4_199:}

红影 发表于 2024-10-1 20:30

欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-10-1 22:10

亚伦这个运用的很好，可以控制标题字{:4_199:}
页: [1]
查看完整版本: 测试控制svg字