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

飞向天空

<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>

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

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 12:52

<h2>代码：</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        #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); } }
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1872393012" autoplay loop&gt;&lt;/audio&gt;
        &lt;video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/05/45/30/video6362e4fa279f6.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="msvg" width="600" height="150"&gt;&lt;/svg&gt;
        &lt;span id="fsbtn"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;scripttype="module"&gt;
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 = `
        &lt;stop offset="0" stop-color="blue" stop-opacity=".9" /&gt;
        &lt;stop offset="1" stop-color="red" stop-opacity=".6" /&gt;
        &lt;animate attributeName="fx" values="0;1;0" dur=".25s" repeatCount="indefinite" /&gt;
`;
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 = () =&gt; {
        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(_ =&gt; dr.svg.style.setProperty('--state', 'paused'));
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

梦江南 发表于 2024-11-11 13:49

老师又出新作了，赞！{:4_199:}

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

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

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

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

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

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

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

{:4_190:}

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

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

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

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

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

马黑黑 发表于 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);动态变化，使得文字呈现出漂亮的飞向天空的姿态
这个设计妙之又妙。。{:4_173:}

马黑黑 发表于 2024-11-11 20:54

泡沫 发表于 2024-11-11 20:53
set('dy', '0 -5 -5 -5 -5 -5 -5 -5 -5');
这个在垂直方向的偏移量，使文字整个向右上方斜排。。
数了一 ...

对，就是这么设计的

泡沫 发表于 2024-11-11 20:56

刚才彻底看不懂渐变这块的，现在结合教程总算略清晰一丢丢。。
再来赞叹老师今天这个贴子创意和效果，
技术和颜值都是顶级的。

红影 发表于 2024-11-11 20:58

这里用到了spreadMethod扩展方式的reflect（反射），这个上节课提了一下，没展开，本来想空了去搜资料看看，结果一直没空都没来得及去看。{:4_173:}

马黑黑 发表于 2024-11-11 21:07

红影 发表于 2024-11-11 20:58
这里用到了spreadMethod扩展方式的reflect（反射），这个上节课提了一下，没展开，本来想空了去搜资料看看 ...

reflect值，在径向渐变，与 r 值息息相关，r 值不能去 0 或 1 否则效果出不来；在线性渐变，教程里谈到了

红影 发表于 2024-11-11 21:15

创建渐变只给了半径，没有给圆心，使用的默认吧。
在stop 标签组设置了fx的变化，回去看了一下，是定义渐变焦点坐标，使得文字闪烁，还挺好看。改成fy也挺好看，感觉到了一个是左右移动一个是上下移动。焦点坐标原来是这样用的。

马黑黑 发表于 2024-11-11 21:20

红影 发表于 2024-11-11 21:15
创建渐变只给了半径，没有给圆心，使用的默认吧。
在stop 标签组设置了fx的变化，回去看了一下，是定义渐 ...

缺省默认值，cx: 0.5, cy: 0.5

马黑黑 发表于 2024-11-11 21:21

红影 发表于 2024-11-11 21:15
创建渐变只给了半径，没有给圆心，使用的默认吧。
在stop 标签组设置了fx的变化，回去看了一下，是定义渐 ...

这里，动画的属性值可以使用 cx 或 cy

红影 发表于 2024-11-11 21:23

dr.text('UP TO SKY',20,130,'url(#rGd)').set('dy', '0 -5 -5 -5 -5 -5 -5 -5 -5');
这句里的set后面的数字是让每个位置逐级上升？管不得文字天然看着就是倾斜的。这样设置很繁琐呢。有多少个占位就要设置多少个呗？

红影 发表于 2024-11-11 21:28

红蓝两色因为焦点变化而变得闪烁，文字的倾斜和旋转是在css里设置的。发现倾斜时加点旋转，那么自然呢，尤其文字本身带点倾斜。{:4_187:}
页: [1] 2 3 4
查看完整版本: 飞向天空