雅丹天女
本帖最后由 马黑黑 于 2024-11-10 08:41 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/ydun.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#msvg { position: absolute; bottom: 10px; cursor: pointer;/* animation: rot 10s linear infinite var(--state);*/ }
#msvg text { stroke-dasharray: 2; stroke-dashoffset: 0; transition: 1s; fill: none; stroke: cyan; stroke-width: 2; font: bold 60px sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 26; animation: flash 6s linear infinite var(--state); }
#msvg:hover text { fill: silver; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { stroke-dashoffset: 160; } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369450" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/15/12/38/video63660ce6ea9f4.mp4" autoplay loop muted></video>
<svg id="msvg" width="300" height="140"></svg>
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.path('M20 160 A120 120,0 1 1,260 160', 'none').id('tp');
dr.text('雅丹天女').textPath('tp', '50%');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script> 本帖最后由 马黑黑 于 2024-11-10 08:41 编辑 <br /><br /><div id="hEdiv"><pre id="hEpre">
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/ydun.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#msvg { position: absolute; bottom: 10px; cursor: pointer;/* animation: rot 10s linear infinite var(--state);*/ }
#msvg text { stroke-dasharray: 2; stroke-dashoffset: 0; transition: 1s; fill: none; stroke: cyan; stroke-width: 2; font: bold 60px sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 26; animation: flash 6s linear infinite var(--state); }
#msvg:hover text { fill: silver; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { stroke-dashoffset: 160; } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369450" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/15/12/38/video63660ce6ea9f4.mp4" autoplay loop muted></video>
<svg id="msvg" width="300" height="140"></svg>
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.path('M20 160 A120 120,0 1 1,260 160', 'none').id('tp');
dr.text('雅丹天女').textPath('tp', '50%');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
音乐婉转悦耳，画面震撼。
视频如羽翼一般展开，也像是给飞天加了无穷的能量~~
这个文本沿路径排字，虚线描边这些好理解~~
但它描边会动，更厉害了。。实现方法与青春那个贴子一样~~
这个文字实例是教程的升级。。 /* animation: rot 10s linear infinite var(--state);*/
这句给了星号，当做注释保留下来了。。因为这个小播不需要旋转{:4_173:}
视频的处理依然完美，这个经典，得记个笔记。。 老师的示范作品真漂亮！{:4_199:} 这个文字描边漂亮，还是动态的。鼠标触碰会增加填充色，让文字更美妙了{:4_187:} 音乐和背景都很玄妙的感觉，有修炼成功、羽化成仙的既视感{:4_199:} 黑黑每做个讲座，都有相应的实例帖子，太不容易了{:4_187:} 泡沫 发表于 2024-11-10 09:33
音乐婉转悦耳，画面震撼。
视频如羽翼一般展开，也像是给飞天加了无穷的能量~~
这个文本沿路径排字，虚线 ...
好久不见{:4_170:} 醉美水芙蓉 发表于 2024-11-10 11:32
天女散花花，老师设计漂亮！
{:4_191:} 红影 发表于 2024-11-10 10:26
黑黑每做个讲座，都有相应的实例帖子，太不容易了
这个容易的吧{:4_189:} 红影 发表于 2024-11-10 10:23
音乐和背景都很玄妙的感觉，有修炼成功、羽化成仙的既视感
说的俺心里美滋滋{:4_170:} 红影 发表于 2024-11-10 10:19
这个文字描边漂亮，还是动态的。鼠标触碰会增加填充色，让文字更美妙了
这也算式文本效果之一 泡沫 发表于 2024-11-10 09:36
/* animation: rot 10s linear infinite var(--state);*/
这句给了星号，当做注释保留下来了。。因为这个 ...
{:4_181:} 梦江南 发表于 2024-11-10 09:41
老师的示范作品真漂亮！
{:4_190:} 马黑黑 发表于 2024-11-10 11:35
这个容易的吧
虽然不难，真正实现还是有讲究的{:4_187:} 马黑黑 发表于 2024-11-10 11:35
说的俺心里美滋滋
这样的帖子很吸引人呢{:4_199:} 马黑黑 发表于 2024-11-10 11:36
这也算式文本效果之一
这效果很惊艳，有路径设置，还有描边动态，把前面将的都用上了呢。
再弄个逐句诗词输出就更棒了{:4_173:} 红影 发表于 2024-11-10 12:23
这效果很惊艳，有路径设置，还有描边动态，把前面将的都用上了呢。
再弄个逐句诗词输出就更棒了{:4_173: ...
这需要做更多的工作