飞向天空

马黑黑 · 发表于 2024-11-11 12:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-11-11 12:52

代码：

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/tosky.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; transform-origin: 0 100%; filter: drop-shadow(-5px -5px 10px black); animation: swing .45s infinite alternate var(--state); }
	#msvg text { font: bold 100px Arial, sans-serif; stroke: snow; stroke-width: 2; transition: .5s; }
	#msvg:hover text { filter: hue-rotate(180deg); }
	#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: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@keyframes swing { to { transform: skew(-30deg) rotate(-5deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1872393012" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/05/45/30/video6362e4fa279f6.mp4" autoplay loop muted></video>
	<svg id="msvg" width="600" height="150"></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');

var stop = `
	<stop offset="0" stop-color="blue" stop-opacity=".9" />
	<stop offset="1" stop-color="red" stop-opacity=".6" />
	<animate attributeName="fx" values="0;1;0" dur=".25s" repeatCount="indefinite" />
`;
var opt = { id: 'rGd', r: .4, spreadMethod: 'reflect' };

dr.gradient('radialGradient', opt, stop);
dr.text('UP TO SKY',20,130,'url(#rGd)').set('dy', '0 -5 -5 -5 -5 -5 -5 -5 -5');

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-11 13:49

老师又出新作了，赞！

泡沫 · 发表于 2024-11-11 19:37

今天的贴子渐变部分理解困难，
我跑来瞧瞧有没有相关说明。。。好干脆的看到没有

马黑黑 · 发表于 2024-11-11 20:05

泡沫发表于 2024-11-11 19:37
今天的贴子渐变部分理解困难，
我跑来瞧瞧有没有相关说明。。。好干脆的看到没有

这是svg渐变的应用，说明去看 svgdr 渐变教程

马黑黑 · 发表于 2024-11-11 20:05

梦江南发表于 2024-11-11 13:49
老师又出新作了，赞！

泡沫 · 发表于 2024-11-11 20:16

马黑黑发表于 2024-11-11 20:05
这是svg渐变的应用，说明去看 svgdr 渐变教程

看了，关于偏移的正在跟现实世界结合起来理解中。

泡沫 · 发表于 2024-11-11 20:44

spreadMethod: 'reflect' 这个开始并不理解，再回去看教程里发现有介绍，
【spreadMethod，扩展方式，值有 pad（缺省默认）、reflect（反射）和 repeat（重复）。】
这里用到的是反射，因为在字体之内的渐变吧，感觉作用不是特别明显。

马黑黑 · 发表于 2024-11-11 20:46

泡沫发表于 2024-11-11 20:44
spreadMethod: 'reflect' 这个开始并不理解，再回去看教程里发现有介绍，
【spreadMethod，扩展方式，值 ...

单独用 rect 应用渐变你就能感觉它们的区别，当然，r1的设置是关键，不能是 0 或 1，就是不能是边缘数

马黑黑 · 发表于 2024-11-11 20:47

泡沫发表于 2024-11-11 20:16
看了，关于偏移的正在跟现实世界结合起来理解中。

应该有点抽象，不过也不是理解不了

泡沫 · 发表于 2024-11-11 20:53

set('dy', '0 -5 -5 -5 -5 -5 -5 -5 -5');
这个在垂直方向的偏移量，使文字整个向右上方斜排。。
数了一下共有 9个数据，应该也算上了文本里的空格。
加上 transform: skew(-30deg) rotate(-5deg);动态变化，使得文字呈现出漂亮的飞向天空的姿态
这个设计妙之又妙。。