【黑师代码】与君（学习黑师2050816《星空夜舞》圆形转场效果）
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; margin:150px 0; left: calc(50% - 81px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/10;--bg: url('https://642303.freep.cn/642303/tu/20250822yjlby001.jpg') no-repeat center/cover; --bg1: url('https://642303.freep.cn/642303/tu/20250822yjlby002.jpg') no-repeat center/cover; --ma-size: 6%; --per: -0.5%; }
#pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); --webkit-mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); }
#ma { left: 78%; top: 16%; background: url('https://642303.freep.cn/642303/za/0a772207b4a0b7d4.png') no-repeat center/cover; animation-duration: 12s; opacity: .8;}
.qk-vid {
mask: linear-gradient(to bottom,transparent,transparent,transparent,red);
-webkit-mask: linear-gradient(to bottom,transparent,transparent,transparent,red);
opacity: .5;
mix-blend-mode: overlay;
}
#btnFs { left: 20px; bottom: 20px; background: rgba(46,139,87, .25);
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384127698" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/10/14/video6365fe4600974.m p4" autoplay loop muted></video>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/07/13/38/video63659ca26f130.mp4" autoplay loop muted></video>
<div id="ma" class="opacity"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var per = 0, step = 0.5, picIdx = 0, raf;
var pics = [
'https://642303.freep.cn/642303/tu/20250822yjlby001.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby002.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby003.jpg',
'https://642303.freep.cn/642303/tu/20250822yjlby004.jpg',
];
ma.onanimationiteration = () => update();
function update() {
if (document.visibilityState === 'hidden') return;
let idx = (per <= 0 ? picIdx : picIdx + 1) % pics.length,
idx1 = (per <= 0 ? picIdx + 1 : picIdx) % pics.length;
pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
picIdx ++;
animate();
}
function animate() {
per += step;
if (per < -0.5 || per > 100) {
cancelAnimationFrame(raf);
step = -step;
} else {
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(animate);
}
}
</script> @马黑黑 白老师来瞅瞅，还差一个圆形的转场效果，整了个古风的。。{:4_173:} 音乐是纯音。。随意找的。。
标题是现成的字，看着长得好看拿来直接用的，加了个阴影边框。。。
跟图搭不搭就顾不上了。{:4_173:} 这个再基地见过了{:4_170:} 马黑黑 发表于 2025-8-23 09:13
这个再基地见过了
{:4_170:}艾玛，都八百年没更新的，刚发一个就被你看到了 花飞飞 发表于 2025-8-23 09:16
艾玛，都八百年没更新的，刚发一个就被你看到了
{:4_190:} 轻奢华之力作，适合攸县之时佐茶{:4_190:} 清新淡雅的古风制作，漂亮的文字设计。
欣赏飞飞好帖{:4_199:} 花朵小播和文字色彩相应成趣，这些小细节飞飞都很注意呢{:4_187:} 马黑黑 发表于 2025-8-23 09:21
轻奢华之力作，适合攸县之时佐茶
先生今天有雅兴，诗兴大发。。
你看这芙蓉玉人堪入画，幽坛竹静正宜茗{:4_173:} 马黑黑 发表于 2025-8-23 09:19
偷偷藏也没藏住{:4_173:}这杯好，喝了。 红影 发表于 2025-8-23 09:48
清新淡雅的古风制作，漂亮的文字设计。
欣赏飞飞好帖
{:4_187:}影子回评的都是鼓励，开心 红影 发表于 2025-8-23 09:50
花朵小播和文字色彩相应成趣，这些小细节飞飞都很注意呢
这是特地去找了个不影响转圈的荷花图案。。
https://www.pngsucai.com/这里抠好的，一天可免费下两张，找小图当小播好用。。
上回你说提供小图片当小播，我很少做这种，需要的话这里可以看看，但都不动的。静态的@马黑黑 马黑黑 发表于 2025-8-23 09:19
同楼不能艾特两次，劳驾你去看下13楼{:4_173:}看有用么 好漂亮的图图，音乐动听，赞哦！{:4_187:} 花飞飞 发表于 2025-8-23 11:57
偷偷藏也没藏住这杯好，喝了。
{:4_196:} 花飞飞 发表于 2025-8-23 11:56
先生今天有雅兴，诗兴大发。。
你看这芙蓉玉人堪入画，幽坛竹静正宜茗
{:4_196:} 花飞飞 发表于 2025-8-23 11:57
影子回评的都是鼓励，开心
飞飞的制作都是很喜欢的很入心的{:4_187:} 花飞飞 发表于 2025-8-23 12:00
这是特地去找了个不影响转圈的荷花图案。。
https://www.pngsucai.com/这里抠好的，一天可免费下两张， ...
哇，这个里面好多好可爱的png图图啊，太棒了，谢谢飞飞{:4_187:} 飞飞这个图图背景人物优雅，古典和现代美相结合，非常的棒！