【黑师代码】路过我心间（学习黑师20240614《大湖》图片转场效果）
<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: lightblue; box-shadow: 3px 3px 6px rgba(0,0,0,.6); overflow: hidden; user-select: none; z-index: 1; perspective: 2000px; position: relative; }
#picbox { position: absolute; opacity: .8; border-radius: 20px; transform-style: preserve-3d; cursor: pointer; }
.vid { position: absolute; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.vid:nth-of-type(1) { position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; pointer-events: none;}
.vid:nth-of-type(2) { position: absolute;top:0px; width: 61%; height:60%; right:-120px;object-fit: cover; pointer-events: none; mix-blend-mode: screen;opacity: .95;}
#aCanv { position: absolute; bottom: 390px; right: 160px; opacity: .5; transform: scale(0.6, 0.6);transform: rotate(21deg);}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz">
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/71/72/63f711836edab.mp4" autoplay loop disablePictureInPicture muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/24/5b5866d92b5c4.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2143833548" autoplay loop></audio>
<img id="picbox" src="https://638183.freep.cn/638183/small/hxxb.webp" alt="" />
<canvas id="aCanv" width="520" height="520"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
//播放器颜色设置
//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };
//歌词
var lrcAr = [
[-2.43,"单曲：路过我心间",3.2],
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
(function() {
const pics = new Array(8).fill(0).map((_,k) => 'https://642303.freep.cn/642303/tu/0614/c' + (k+1) + '.png');
let ani, ar = [];
const loadImages = async urls => {
const promises = [];
for (let url of urls) {
promises.push(new Promise(resolve => {
const img = new Image();
img.onload = () => {
ar.push([`${img.src}`, `${img.naturalWidth}`, `${img.naturalHeight}`]);
resolve();
};
img.src = url;
}));
}
await Promise.all(promises);
showPic();
};
const showPic = () => {
let idx = Math.floor(Math.random() * pics.length);
let w1 = tz.offsetWidth, h1 = tz.offsetHeight, w2 = ar, h2 = ar;
let x = Math.random() > 0.1 ? w1 : -w1, y = Math.random() > 0.5 ? h1 : -h2;
picbox.src = ar;
const kfs = [
{left: `${x}px`, top: `${y}px`},
{left: `${(w1 - w2) / 3}px`, top: `${(h1 - h2) / 2}px`, transform: `rotateY(0)`, offset: 0.1},
{transform: `rotateY(-15deg)`},
{transform: `rotateY(0)`},
{transform: `scale(1.2)`},
{transform: `scale(0.8)`},
{transform: `rotateY(1deg)`},
{left: `${(w1 - w2) / 2}px`, top: `${(h1 - h2) / 2}px`, transform: `rotateY(0)`, offset: 0.9},
{left: `${x}px`, top: `${y}px`, transform: `rotateZ(0deg) scale(0)`},
];
ani = picbox.animate(kfs, 10000);
ani.onfinish = () => showPic();
};
picbox.onclick = () => aud.paused ? (aud.play(), ani.play()) : (aud.pause(), ani.pause());
picbox.onmouseover = () => { if(!aud.paused) ani.pause(); };
picbox.onmouseout = () => { if(!aud.paused) ani.play(); };
loadImages(pics);
})();
</script>
@马黑黑 白老师来瞧一眼，交一份大湖的作业。。{:4_173:} 不用做图真的是太友好了。。{:4_170:}
歌曲偷懒没整，抄了之前的一贴 刚发现一个好玩的，
点图片，所有动态可以暂停，包括歌曲。。
点音乐里的暂停，控不了图片。。
{:4_170:} 这好棒，月儿用了透明图的轮转，让那些小人儿在春风里蹁跹。
这个漂亮{:4_199:} 还用了曲线排布的歌词效果，两个效果结合得很好呢，点击图片和点击播放器按钮都能暂停。
给月儿点赞{:4_199:} 好清新可爱的画面{:4_199:} 大辫子的姑娘突然从天而降，赞！{:4_199:} 红影 发表于 2024-6-14 12:59
这好棒，月儿用了透明图的轮转，让那些小人儿在春风里蹁跹。
这个漂亮
刚好刷到这组小丫头，有好多张，蛮可爱就大概抠了下用上了。。。{:4_173:} 红影 发表于 2024-6-14 13:00
还用了曲线排布的歌词效果，两个效果结合得很好呢，点击图片和点击播放器按钮都能暂停。
给月儿点赞{:4_19 ...
两个效果完全没冲突，也是神奇 。。
曲线歌词为了绕着玫瑰花。。
效果还是不理想，只有半个圆哪。。。{:4_170:} 红影 发表于 2024-6-14 13:01
好清新可爱的画面
有点童趣的样纸。。 梦江南 发表于 2024-6-14 13:48
大辫子的姑娘突然从天而降，赞！
这个效果是套的代码。。感谢支持。。{:4_190:} 醉美水芙蓉 发表于 2024-6-14 17:26
月儿厉害！几个效果加一起！
这个歌词的好用，直接加就完了。。{:4_170:}别的没加什么，多了一个视频。 南无月 发表于 2024-6-14 12:58
刚发现一个好玩的，
点图片，所有动态可以暂停，包括歌曲。。
点音乐里的暂停，控不了图片。。
这就是覆盖冲突：后面的交互时间覆盖了前面的 马黑黑 发表于 2024-6-14 18:27
这就是覆盖冲突：后面的交互时间覆盖了前面的
还看到一个小花在左上角，这个是老师有意留的吧。。
如果图片加载不出来，它可以充当小播 小丫头们个个笑脸盈盈的从天而降。好时尚，好阳光。 樵歌 发表于 2024-6-14 21:25
小丫头们个个笑脸盈盈的从天而降。好时尚，好阳光。
谢谢肯定和鼓励{:4_190:} 南无月 发表于 2024-6-14 17:55
刚好刷到这组小丫头，有好多张，蛮可爱就大概抠了下用上了。。。
用透明图加到背景里，这构思很奇妙{:4_187:} 南无月 发表于 2024-6-14 17:56
两个效果完全没冲突，也是神奇 。。
曲线歌词为了绕着玫瑰花。。
效果还是不理想，只有半个圆哪。。。{ ...
已经很不错了，围绕了玫瑰花的外围了呢，调整得弧度和位置差不多，就很不容易了{:4_199:}
页:
[1]
2