论坛 › 欢乐水吧 › iooi

马黑黑 发表于 2023-3-26 10:51

iooi

本帖最后由 马黑黑 于 2023-3-26 10:58 编辑 <br /><br /><style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp/iooi.webp') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
        position: absolute;
        display: block;
        opacity: 1;
        animation: opa 20s infinite alternate linear;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid blue;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: blue;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent blue;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1978621916" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/33/5b57cbd737c25.mp4" loop autoplay></video>

<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 50, ww, hh, 0, 0, ww + 100, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

马黑黑 发表于 2023-3-26 10:54

代码
<style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp/iooi.webp') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
        position: absolute;
        display: block;
        opacity: 1;
        animation: opa 20s infinite alternate linear;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid blue;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: blue;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent blue;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1978621916" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/33/5b57cbd737c25.mp4" loop autoplay></video>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 50, ww, hh, 0, 0, ww + 100, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

红影 发表于 2023-3-26 11:13

黑黑要留楼不？{:4_173:}

红影 发表于 2023-3-26 11:15

这个有趣，视频和背景图相互替换，按钮是鼠标上去才浮现的。黑黑给了这群舞者一个转动的舞台呢{:4_199:}

红影 发表于 2023-3-26 11:17

视频的动作和透明度变化都和播放器按钮是联动的，我点击让它暂停在一半透明度的时候了，看着很漂亮{:4_187:}

红影 发表于 2023-3-26 11:19

曲子名很奇特，但曲子很好听呢{:4_199:}

马黑黑 发表于 2023-3-26 11:42

红影 发表于 2023-3-26 11:13
黑黑要留楼不？

不留

马黑黑 发表于 2023-3-26 11:43

红影 发表于 2023-3-26 11:15
这个有趣，视频和背景图相互替换，按钮是鼠标上去才浮现的。黑黑给了这群舞者一个转动的舞台呢

有意思吧？这是发呆的结果：发呆能产生创意。昨天开会发呆了，发完呆就有了做这个帖子的设想。

马黑黑 发表于 2023-3-26 11:44

红影 发表于 2023-3-26 11:17
视频的动作和透明度变化都和播放器按钮是联动的，我点击让它暂停在一半透明度的时候了，看着很漂亮{:4_187: ...

半透明是很诱人的

马黑黑 发表于 2023-3-26 11:44

红影 发表于 2023-3-26 11:19
曲子名很奇特，但曲子很好听呢

这曲名看着俩个什么符号

雨中悄然 发表于 2023-3-26 12:58

马黑黑 发表于 2023-3-26 11:44
这曲名看着俩个什么符号

这不是个眼镜儿么

雨中悄然 发表于 2023-3-26 12:59

不懂原理，就闭着眼跟一贴{:4_170:}

马黑黑 发表于 2023-3-26 13:01

雨中悄然 发表于 2023-3-26 12:58
这不是个眼镜儿么

像

马黑黑 发表于 2023-3-26 13:03

雨中悄然 发表于 2023-3-26 12:59
不懂原理，就闭着眼跟一贴

原理简单：帖子主体由一个div元素带同尺寸的canvas画布元素，画布映射了视频内容。画布的透明度在一个区间不断来回变化。#mplayer则是帖子的控制按钮。

雨中悄然 发表于 2023-3-26 13:03

马黑黑 发表于 2023-3-26 13:03
原理简单：帖子主体由一个div元素带同尺寸的canvas画布元素，画布映射了视频内容。画布的透明度在一个区 ...

我做的按纽按不动{:4_170:}

雨中悄然 发表于 2023-3-26 13:04

马黑黑 发表于 2023-3-26 13:01
像

不然这是个啥

马黑黑 发表于 2023-3-26 13:04

雨中悄然 发表于 2023-3-26 13:03
我做的按纽按不动

按不动说明JS有错误，按F12查查

马黑黑 发表于 2023-3-26 13:04

雨中悄然 发表于 2023-3-26 13:04
不然这是个啥

啥也不是

小辣椒 发表于 2023-3-26 13:05

好像视频和图图轮流换，我感觉晕乎乎的

马黑黑 发表于 2023-3-26 13:05

小辣椒 发表于 2023-3-26 13:05
好像视频和图图轮流换，我感觉晕乎乎的

没有轮换

查看完整版本: iooi