【黑师代码】时光印记（学习黑师20241026《月背》小播缩放效果）
<style>#pa { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20241027sgyj02.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative;overflow: hidden; }
.ell { left:900px;fill: transparent; stroke: DarkOrange; stroke-width: 1.5; filter: opacity(.5) drop-shadow(10px 0 12px DarkGray); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state);opacity: 0.59; }
.ell:hover { stroke-width: 4; }
#mypic1 { position: absolute; width: 360px;left: calc(90% - 130px); mix-blend-mode: screen;top: 20px;animation: fly 30s alternate infinite forwards var(--state); --xx: 1%;z-index: 10;pointer-events: none;}
#mypic2{ position: absolute; width: 360px;left: calc(10% + 660px); mix-blend-mode:multiply;top: 360px;animation: fly 25s alternate infinite forwards var(--state); transform: scale(-1,1);--xx: 90%;z-index: 10;pointer-events: none;}
#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);opacity: 0.69; }
@keyframes bigger { to { rx: 41; ry: 41; } }
@keyframes fly { to { left: var(--xx); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1455273374" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay loop muted></video>
<svg id="svg1" width="100%" height="100%"></svg>
<img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
<img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
</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 = 4).fill().forEach((_,key) => {
let cx = 300 / total * key + 895,
cy = key < Math.floor(total / 2) ? 590 + key * 1 : 500 + (total - key) * 48,
delay = `${-1 * Math.random()}`;
dr.ellipse(cx , cy, 40, 40).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> @马黑黑 白老师我先交一份作业。。另一份论坛发不成功，先搁着。。{:4_173:} 奇了，小播缩放动态效果好象没出来？@马黑黑 老师帮忙瞧一瞧。。 花飞飞 发表于 2024-10-27 22:36
奇了，小播缩放动态效果好象没出来？@马黑黑 老师帮忙瞧一瞧。。
没见有缩放的代码呀，只有相应指针的hover代码，这个是起效的 呀，飞飞把那些圆环变成了文字外面的圈圈呢，而且位置调得那么好。这构思太奇妙了{:4_199:} 音画制作漂亮，视频也用得好，移动的燕群也很奇妙。
这个制作太美了，给飞飞点赞{:4_199:} 飞飞的图图越来越漂亮了{:4_199:} 这个播放器就是圆圈？黑黑那个月光的播放器效果圆会动的，飞飞特意制作这种效果吗 欣赏飞飞的精彩制作 小辣椒 发表于 2024-10-28 22:03
欣赏飞飞的精彩制作
小辣椒来了开心哦。。{:4_187:} 小辣椒 发表于 2024-10-28 22:03
这个播放器就是圆圈？黑黑那个月光的播放器效果圆会动的，飞飞特意制作这种效果吗
是套月背那个贴子的，效果是一样的，也会动，幅度很小，换个浏览器看一看。。{:4_170:} 小辣椒 发表于 2024-10-28 21:59
飞飞的图图越来越漂亮了
看到你这么说真是开心{:4_173:} 醉美水芙蓉 发表于 2024-10-28 11:10
给花花点赞！⭕️放的位置刚好！厉害了！
感谢水芙蓉支持哦。。想了一下装饰文字挺好的。调位置是有点麻烦。。{:4_187:} 红影 发表于 2024-10-27 23:50
音画制作漂亮，视频也用得好，移动的燕群也很奇妙。
这个制作太美了，给飞飞点赞
飞鸟仿很久之前小船的移动，飘来飘去比原地好看些就用上了。。感谢影子支持鼓励{:4_187:} 红影 发表于 2024-10-27 23:48
呀，飞飞把那些圆环变成了文字外面的圈圈呢，而且位置调得那么好。这构思太奇妙了
看了下圆环装饰文字位置 比较恰当，就调整了一下{:4_187:} 马黑黑 发表于 2024-10-27 22:48
没见有缩放的代码呀，只有相应指针的hover代码，这个是起效的
我开始用火狐，后来换了个浏览器就好了。可以正常显示效果了。 花飞飞 发表于 2024-10-29 09:34
我开始用火狐，后来换了个浏览器就好了。可以正常显示效果了。
那就好。火狐有一些功能尚未实现 花飞飞 发表于 2024-10-29 09:21
小辣椒来了开心哦。。
飞飞晚上好{:4_171:} 花飞飞 发表于 2024-10-29 09:29
是套月背那个贴子的，效果是一样的，也会动，幅度很小，换个浏览器看一看。。
飞飞的制作很漂亮，小辣椒纯的套用{:4_170:}