论坛 › 动画音画 › Atlas

马黑黑 发表于 2024-11-2 08:27

Atlas

<style>
        #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/altas.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #msvg ellipse { transition: .5s; }
        #msvg:hover ellipse { ry: 30; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        #fsbtn { position: absolute; left: 48%; bottom: 20px; color: yellow; background: steelblue; padding: 4px 6px; border: 2px solid yellow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28521911" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/23/5b52fe0bbcc5d.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
        var dr = _dr('#msvg');
        dr.defs('defs');
        dr.g('g1').addTo('defs');
        dr.ellipse(100,100,50,25,'none','var(--color)',6).addTo('g1');
        var total = 8;
        Array(total).fill('').forEach( (_, k) => {
                var color = `#${Math.random().toString(16).substring(2,8)}`;
                dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(40)`).style(`--color: ${color};`);
        });
        msvg.onclick = () => {
                msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
        };
};

import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

马黑黑 发表于 2024-11-2 08:28

<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/4/altas.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #msvg ellipse { transition: .5s; }
        #msvg:hover ellipse { ry: 30; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        #fsbtn { position: absolute; left: 48%; bottom: 20px; color: yellow; background: steelblue; padding: 4px 6px; border: 2px solid yellow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(360deg); } }
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=28521911" autoplay loop&gt;&lt;/audio&gt;
        &lt;video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/23/5b52fe0bbcc5d.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="msvg" width="200" height="200"&gt;&lt;/svg&gt;
        &lt;span id="fsbtn"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;scripttype="module"&gt;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () =&gt; {
        var dr = _dr('#msvg');
        dr.defs('defs');
        dr.g('g1').addTo('defs');
        dr.ellipse(100,100,50,25,'none','var(--color)',6).addTo('g1');
        var total = 8;
        Array(total).fill('').forEach( (_, k) =&gt; {
                var color = `#${Math.random().toString(16).substring(2,8)}`;
                dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(40)`).style(`--color: ${color};`);
        });
        msvg.onclick = () =&gt; {
                msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
        };
};

import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
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-2 09:01

向老师学习 Atlas代码。{:4_199:}

梦江南 发表于 2024-11-2 09:01

早上好！{:4_190:}

花飞飞 发表于 2024-11-2 09:04

这个小播完美展示椭圆的画法。。
看着方法与画圆的差不多，多了一个宽高
dr.ellipse(100,100,50,25,'none','var(--color)',6).addTo('g1');
位置坐标100.100，宽50，高25，无填充色用none，描边颜色随机，描边宽度6..添到到组1之中。。

花飞飞 发表于 2024-11-2 09:06

第二行代码最后一句：--state: running; 大背景里出现这个变量控制的很少见。。。是不是SVG贴子特有的。

马黑黑 发表于 2024-11-2 09:09

梦江南 发表于 2024-11-2 09:01
向老师学习 Atlas代码。

{:4_191:}

马黑黑 发表于 2024-11-2 09:10

花飞飞 发表于 2024-11-2 09:04
这个小播完美展示椭圆的画法。。
看着方法与画圆的差不多，多了一个宽高
dr.ellipse(100,100,50,25,'none ...

不是宽高，是椭圆的XY轴的两个半径

花飞飞 发表于 2024-11-2 09:10

动态视频选得特别，与背景完美互相映衬，下落的粒子如光沐雪山，效果完美。。
全屏代码用了升级版的，按纽色彩设计了蓝黄二色，与背景一致，奇异的好看。。
白老师色彩设计都是剑走偏锋，创意大胆，令人意想不到，十分耐看。。

花飞飞 发表于 2024-11-2 09:13

马黑黑 发表于 2024-11-2 09:10
不是宽高，是椭圆的XY轴的两个半径
习惯称圆为半径，因为都一样。
这个就是左右半径跟上下半径不一致，就变成椭圆了。。
原来它也要用半径描述，乐。。

马黑黑 发表于 2024-11-2 09:14

花飞飞 发表于 2024-11-2 09:06
第二行代码最后一句：--state: running; 大背景里出现这个变量控制的很少见。。。是不是SVG贴子特有的。

不是什么特有，其实之前早用过的。原理是：

CSS变量有穿透能力，父元素可以传递 --xxx 变量值给子元素、子子元素、子子子元素……，酱紫，可以在父元素之上去控制这个变量，子孙元素们都会受到这个变量值的动态变更。

当然这里面有个前提：不要在任意一个子孙元素去设置该CSS变量，否则父元素关于该变量的赋值穿透力就会丧失。子孙元素若设置了该变量，表明自己在这个变量上拥有自主权，另立门户的意思。

马黑黑 发表于 2024-11-2 09:16

花飞飞 发表于 2024-11-2 09:13
习惯称圆为半径，因为都一样。
这个就是左右半径跟上下半径不一致，就变成椭圆了。。
原来它也要用半径 ...

半径和宽高不一样的。直径才会等于圆或椭圆的占位宽高。

马黑黑 发表于 2024-11-2 09:17

花飞飞 发表于 2024-11-2 09:10
动态视频选得特别，与背景完美互相映衬，下落的粒子如光沐雪山，效果完美。。
全屏代码用了升级版的，按纽 ...

这是因为弱视，啥也看不清{:4_170:}

花飞飞 发表于 2024-11-2 09:24

马黑黑 发表于 2024-11-2 09:14
不是什么特有，其实之前早用过的。原理是：

CSS变量有穿透能力，父元素可以传递 --xxx 变量值给子元素 ...

子孙元素使用这个变量比较常见，然后在JS里统一控制播放和暂停。
但大背景中给老祖一个这样的变量我看着新鲜。。

现在明白了，原来级别太高，控制面广，一般不惊动不启用。

之前用的都是子孙元素个性化，今天这个是所有行动要听指挥{:4_170:}

花飞飞 发表于 2024-11-2 09:26

马黑黑 发表于 2024-11-2 09:16
半径和宽高不一样的。直径才会等于圆或椭圆的占位宽高。

细想一下果然如此，挺严谨的说法。。。
圆和椭圆没有设置直径的位置，所以还是不要说宽高了。

花飞飞 发表于 2024-11-2 09:28

马黑黑 发表于 2024-11-2 09:17
这是因为弱视，啥也看不清

听你胡说呢。。。还看不清。。。都能出个偏锋色彩专著了。。{:4_173:}

马黑黑 发表于 2024-11-2 09:29

花飞飞 发表于 2024-11-2 09:28
听你胡说呢。。。还看不清。。。都能出个偏锋色彩专著了。。

这是偶然的

马黑黑 发表于 2024-11-2 09:29

花飞飞 发表于 2024-11-2 09:26
细想一下果然如此，挺严谨的说法。。。
圆和椭圆没有设置直径的位置，所以还是不要说宽高了。

占位宽高可以说说

马黑黑 发表于 2024-11-2 09:31

花飞飞 发表于 2024-11-2 09:24
子孙元素使用这个变量比较常见，然后在JS里统一控制播放和暂停。
但大背景中给老祖一个这样的变量我看着 ...

这是早用过的，只不过更多的时候，不一定在CSS中给变量在父元素中赋值，可以在js里完成，依托还是父元素（根据需要也可以是一个子孙元素做变量的管理者）。

花飞飞 发表于 2024-11-2 09:36

马黑黑 发表于 2024-11-2 09:29
这是偶然的

看似偶然，实则必然。。一个人的思维方式是不变的。最后终成永恒。。

比如生命是偶然的，也是永恒的。。{:4_173:}

查看完整版本: Atlas