【黑师代码】花沉雪（学习黑师20250810《Back To Yesterday》4图转场效果）
本帖最后由 花飞飞 于 2025-8-13 16:58 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9;margin: 150px 0;left: calc(50% - 81px);--bg: url('https://642303.freep.cn/642303/tu/1g.jpg') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 3%; --per: -2%; --a: 45deg; }
#pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
#ma {left: 22%; top: 30%; background: url('https://642303.freep.cn/642303/za/fl1033.png') no-repeat center/cover;}
#btnFs { right: 20px; bottom: 20px; }
.qk-vid { mix-blend-mode:screen; opacity: .75;-webkit-mask: linear-gradient(to bottom,transparent,transparent,red);}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1836109098" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/20/video63661b5c8b098.mp4" autoplay loop muted></video>
<div id="ma" class="hue-rotate"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var per = -2, step = 0.5, aniCounter = 0, raf;
var pics = [
'https://642303.freep.cn/642303/tu/1g.jpg',
'https://642303.freep.cn/642303/tu/3g.jpg',
'https://642303.freep.cn/642303/tu/4g.jpg',
'https://642303.freep.cn/642303/tu/5g.jpg',
];
ma.onanimationiteration = () => {
var angle = aniCounter % 4, picIdx = aniCounter % pics.length;
pa.style.setProperty('--a', `${180 + (angle * 90)}deg`);
pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
picIdx = (picIdx + 1) % pics.length;
aniCounter ++;
changePic();
};
function changePic() {
if (per > 100) {
cancelAnimationFrame(raf);
per = -2;
var picIdx = aniCounter % pics.length;
picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
} else {
per += step;
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(changePic);
}
}
</script> @马黑黑 这个转场效果特别喜欢，整出一组图跟个作业
小播颜色问题已解决。。那天肯定是整到晕头了，原来真的不难{:4_170:} 欣赏飞飞老师精美的音画，清雅，大方。问好！{:4_187:} 花飞飞 发表于 2025-8-13 11:13
@马黑黑 这个转场效果特别喜欢，整出一组图跟个作业
小播颜色问题已解决。。那天肯定是整到晕头了，原来真 ...
懂的改JS修改转场角度，不错不错。
帖子唯美大气，各种设计都恰到好处 制作大气 音画唯美 歌曲好听，感谢花飞飞带来的精彩，辛苦了。 这个是小图的转场呢，聪明，大图作为背景不用动，也不会遇到太大图片加载问题。
这个转场的方向不是45度方向，被飞飞修改成了适合这个的正向移动。
小播又被动作字体设计的补充了，这个已经成为飞飞帖子里的特定风格了{:4_173:} 视频的选择也很合适，和图上背景及美人儿了，组成了如此美妙的场景。
欣赏飞飞好帖，这个帖子太赞了{:4_199:} 漂亮！谢谢花飞飞精彩分享{:4_204:} 梦江南 发表于 2025-8-13 11:47
欣赏飞飞老师精美的音画，清雅，大方。问好！
感谢梦江南支持鼓励 马黑黑 发表于 2025-8-13 12:21
懂的改JS修改转场角度，不错不错。
帖子唯美大气，各种设计都恰到好处
果然对小白没有期待就能看到惊喜，
JS里有数据啊，这个改改还是可以滴{:4_173:}
贴子又改了，换了一张图，渐变重整了一下，感觉自然一些。 偶然~ 发表于 2025-8-13 13:31
歌曲好听，感谢花飞飞带来的精彩，辛苦了。
感谢偶然临贴支持 红影 发表于 2025-8-13 13:44
这个是小图的转场呢，聪明，大图作为背景不用动，也不会遇到太大图片加载问题。
这个转场的方向不是45度方 ...
不是小图，是背景一样的四张图。。
小播花一样用来装饰感觉也不错{:4_187:} 红影 发表于 2025-8-13 13:45
视频的选择也很合适，和图上背景及美人儿了，组成了如此美妙的场景。
欣赏飞飞好帖，这个帖子太赞了{:4_19 ...
谢谢影子鼓励哦。。{:4_187:} 杨帆 发表于 2025-8-13 17:02
漂亮！谢谢花飞飞精彩分享
感谢杨帆支持{:4_187:} 花飞飞 发表于 2025-8-13 18:20
果然对小白没有期待就能看到惊喜，
JS里有数据啊，这个改改还是可以滴
多多润色，对做帖是一种锻炼 马黑黑 发表于 2025-8-13 18:22
多多润色，对做帖是一种锻炼
我是过一会就看不顺眼了，就得改改。。。
今晚上这里有 点卡啊。。半天框框不出来{:4_173:} 花飞飞 发表于 2025-8-13 21:22
我是过一会就看不顺眼了，就得改改。。。
今晚上这里有 点卡啊。。半天框框不出来
这里不太稳定 马黑黑 发表于 2025-8-13 21:24
这里不太稳定
重启一下换个浏览器，现在好一些了
页:
[1]
2