月背
<style>#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/moonback.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.ell { fill: transparent; stroke: skyblue; stroke-width: 8; filter: opacity(.5) drop-shadow(10px 0 12px navy); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state); }
.ell:hover { stroke-width: 12; }
#vid { position: absolute; width: 100%; height: 100%; boject-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask: linear-gradient(to top right, red 88%, transparent 0); }
@keyframes bigger { to { rx: 60; ry: 30; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942369" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" autoplay loop muted></video>
<svg id="svg1" width="100%" height="100%"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=' + new Date().getTime();
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#svg1');
Array(total = 9).fill().forEach((_,key) => {
let cx = 1024 / total * key + 55,
cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30,
delay = `${-1 * Math.random()}`;
dr.ellipse(cx , cy, 40, 60).set('class', 'ell').style(`--delay: ${delay}s`);
});
aud.onplaying = aud.onpause = () => mState();
var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
};
</script>
帖子代码：
<style>
#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/moonback.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.ell { fill: transparent; stroke: skyblue; stroke-width: 8; filter: opacity(.5) drop-shadow(10px 0 12px navy); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state); }
.ell:hover { stroke-width: 12; }
#vid { position: absolute; width: 100%; height: 100%; boject-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask: linear-gradient(to top right, red 88%, transparent 0); }
@keyframes bigger { to { rx: 60; ry: 30; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942369" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" autoplay loop muted></video>
<svg id="svg1" width="100%" height="100%"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=' + new Date().getTime();
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#svg1');
Array(total = 9).fill().forEach((_,key) => {
let cx = 1024 / total * key + 55,
cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30,
delay = `${-1 * Math.random()}`;
dr.ellipse(cx , cy, 40, 60).set('class', 'ell').style(`--delay: ${delay}s`);
});
aud.onplaying = aud.onpause = () => mState();
var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
};
</script>
Dark Side Of The Moon（月背）是 Steve Jablonsky 的作品，所属专辑 Transformers: Dark of the Moon (The Score) 月亮的背面好多神秘的椭圆在发功{:4_173:} 这个有意思，椭圆的rxry在40 60和60 30间的变化，就带来这么奇妙的效果呢。
视频也加得漂亮，衬托了神秘感{:4_187:} var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
所有椭圆都能被点击，而且鼠标触动还能让边框厚度变化。很奇妙的设计{:4_199:}
想起多个视频也有类似的设置。
9个椭圆横向均布，纵向的cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30
竟能得到类似圆弧的排布，没想到。
delay = `${-1 * Math.random()}`;让它们错落有致地动着，更有趣味。 神秘的月背据说有外星人{:4_200:} 马黑黑 发表于 2024-10-26 16:05
Dark Side Of The Moon（月背）是 Steve Jablonsky 的作品，所属专辑 Transformers: Dark of the Moon (The ...
这个画面主体是月亮，在视频渲染之下，莫明神秘。。配上这样的音乐，恢弘大气。。节奏感和气势十足~~老师总能找到好听的音乐，赞。。 这一群跳跃的椭圆，很吸睛，可爱的一群。。
椭圆原来是40*60，变化为60*30，
碰触描边宽度由8变为12~
这9个竖向排列有点神奇，不用通过路径也可以排出这么漂亮的弧度，数学的美被老师体现得淋漓尽致。。。 花飞飞 发表于 2024-10-26 19:42
这一群跳跃的椭圆，很吸睛，可爱的一群。。
椭圆原来是40*60，变化为60*30，
碰触描边宽度由8变为12~
这是按次序分两节计算 cy 参数，中间最高，两边依次矮下去 红影 发表于 2024-10-26 18:42
月亮的背面好多神秘的椭圆在发功
永动机找到了{:4_170:} 醉美水芙蓉 发表于 2024-10-26 16:43
欣赏老师带来的精彩！
{:4_190:} 红影 发表于 2024-10-26 18:44
这个有意思，椭圆的rxry在40 60和60 30间的变化，就带来这么奇妙的效果呢。
视频也加得漂亮，衬托了神秘 ...
一切属性可动画是svg的精髓之一 红影 发表于 2024-10-26 18:46
var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? ...
这些都是CSS做的。交互是JS实现的，forEach 这里看到了吧 花飞飞 发表于 2024-10-26 19:39
这个画面主体是月亮，在视频渲染之下，莫明神秘。。配上这样的音乐，恢弘大气。。节奏感和气势十足~~老师 ...
音乐有的是哈 红影 发表于 2024-10-26 18:52
神秘的月背据说有外星人
陨石坑很多 红影 发表于 2024-10-26 18:50
9个椭圆横向均布，纵向的cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30
...
这是测绘基本功{:4_170:} 这么多会跳动的圆，是刚才那个css和js指令的代码制作？