雅丹天女

马黑黑

马黑黑

<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>
 
<script  type="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>

泡沫

音乐婉转悦耳，画面震撼。
视频如羽翼一般展开，也像是给飞天加了无穷的能量~~
这个文本沿路径排字，虚线描边这些好理解~~
但它描边会动，更厉害了。。实现方法与青春那个贴子一样~~
这个文字实例是教程的升级。。

泡沫

/* animation: rot 10s linear infinite var(--state);*/
这句给了星号，当做注释保留下来了。。因为这个小播不需要旋转
视频的处理依然完美，这个经典，得记个笔记。。

梦江南

老师的示范作品真漂亮！

红影

这个文字描边漂亮，还是动态的。鼠标触碰会增加填充色，让文字更美妙了

红影

音乐和背景都很玄妙的感觉，有修炼成功、羽化成仙的既视感

红影

黑黑每做个讲座，都有相应的实例帖子，太不容易了

马黑黑

泡沫 发表于 2024-11-10 09:33
音乐婉转悦耳，画面震撼。
视频如羽翼一般展开，也像是给飞天加了无穷的能量~~
这个文本沿路径排字，虚线 ...

好久不见

马黑黑

醉美水芙蓉 发表于 2024-11-10 11:32
天女散花花，老师设计漂亮！

马黑黑

红影 发表于 2024-11-10 10:26
黑黑每做个讲座，都有相应的实例帖子，太不容易了

这个容易的吧

马黑黑

红影 发表于 2024-11-10 10:23
音乐和背景都很玄妙的感觉，有修炼成功、羽化成仙的既视感

说的俺心里美滋滋

马黑黑

红影 发表于 2024-11-10 10:19
这个文字描边漂亮，还是动态的。鼠标触碰会增加填充色，让文字更美妙了

这也算式文本效果之一

马黑黑

泡沫 发表于 2024-11-10 09:36
/* animation: rot 10s linear infinite var(--state);*/
这句给了星号，当做注释保留下来了。。因为这个 ...

马黑黑

梦江南 发表于 2024-11-10 09:41
老师的示范作品真漂亮！

红影

马黑黑 发表于 2024-11-10 11:35
这个容易的吧

虽然不难，真正实现还是有讲究的

红影

马黑黑 发表于 2024-11-10 11:35
说的俺心里美滋滋

这样的帖子很吸引人呢

红影

马黑黑 发表于 2024-11-10 11:36
这也算式文本效果之一

这效果很惊艳，有路径设置，还有描边动态，把前面将的都用上了呢。
再弄个逐句诗词输出就更棒了

马黑黑

红影 发表于 2024-11-10 12:23
这效果很惊艳，有路径设置，还有描边动态，把前面将的都用上了呢。
再弄个逐句诗词输出就更棒了{:4_173: ...

这需要做更多的工作