马黑黑 发表于 2023-12-26 11:50

巫娜-方寸一席

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/3/fcyx.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player {
        position: absolute;
        left: 384px;
        top: 166px;
        width: 230px;
        height: 230px;
        cursor: pointer;
        animation: rotating 6s infinite alternate linear var(--state);
}
li-zi {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: navy;
        opacity: .75;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        top: -60px;
        width: 1024px;
        height: 700px;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
}
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)); }
        to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=501220959" autoplay loop></audio>
        <div id="player"></div>
</div>

<script>

(function() {

let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
        let rad0 = (Math.PI / 180) * 360 / total * key,
                rad1 = (Math.PI / 180) * (180 + (360 / total * key));
        item = document.createElement('li-zi');
        item.style.cssText += `
                --x0: ${r + r * Math.cos(rad0)}px;
                --y0: ${r + r * Math.sin(rad0)}px;
                --x1: ${r + r * Math.cos(rad1)}px;
                --y1: ${r + r * Math.sin(rad1)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        player.appendChild(item);
});

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

player.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

马黑黑 发表于 2023-12-26 11:52

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/3/fcyx.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player {
        position: absolute;
        left: 384px;
        top: 166px;
        width: 230px;
        height: 230px;
        cursor: pointer;
        animation: rotating 6s infinite alternate linear var(--state);
}
li-zi {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: navy;
        opacity: .75;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        top: -60px;
        width: 1024px;
        height: 700px;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
}
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)); }
        to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=501220959" autoplay loop></audio>
        <div id="player"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
        let rad0 = (Math.PI / 180) * 360 / total * key,
                rad1 = (Math.PI / 180) * (180 + (360 / total * key));
        item = document.createElement('li-zi');
        item.style.cssText += `
                --x0: ${r + r * Math.cos(rad0)}px;
                --y0: ${r + r * Math.sin(rad0)}px;
                --x1: ${r + r * Math.cos(rad1)}px;
                --y1: ${r + r * Math.sin(rad1)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        player.appendChild(item);
});

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>


红影 发表于 2023-12-26 12:08

这个视频用得好，弄得那些小球像是宇宙爆炸的中心似的{:4_173:}

红影 发表于 2023-12-26 12:09

这个制作效果太奇特了，很赞{:4_199:}

马黑黑 发表于 2023-12-26 12:09

红影 发表于 2023-12-26 12:08
这个视频用得好，弄得那些小球像是宇宙爆炸的中心似的

这又是欺骗{:4_170:}

马黑黑 发表于 2023-12-26 12:11

红影 发表于 2023-12-26 12:09
这个制作效果太奇特了，很赞

一般般吧

红影 发表于 2023-12-26 12:44

马黑黑 发表于 2023-12-26 12:09
这又是欺骗

虽然是对眼睛的欺骗，但是非常有趣和惊艳{:4_187:}

红影 发表于 2023-12-26 12:45

马黑黑 发表于 2023-12-26 12:11
一般般吧

很棒的，特别壮观{:4_199:}

亦是金 发表于 2023-12-26 13:23

黑黑老师的精美教程，一个一个的接踵而来，我都来不及细品琢磨套用了！{:4_198:}

世外桃源 发表于 2023-12-26 14:05

欣赏老师的精彩分享{:4_187:}

世外桃源 发表于 2023-12-26 14:05

可惜学生很笨

世外桃源 发表于 2023-12-26 14:05

老师辛苦

马黑黑 发表于 2023-12-26 14:10

红影 发表于 2023-12-26 12:44
虽然是对眼睛的欺骗，但是非常有趣和惊艳

还好

马黑黑 发表于 2023-12-26 14:10

红影 发表于 2023-12-26 12:45
很棒的，特别壮观

过得去

马黑黑 发表于 2023-12-26 14:10

亦是金 发表于 2023-12-26 13:23
黑黑老师的精美教程，一个一个的接踵而来，我都来不及细品琢磨套用了！

{:4_190:}

马黑黑 发表于 2023-12-26 14:10

世外桃源 发表于 2023-12-26 14:05
老师辛苦

手掌辛苦{:4_170:}

红影 发表于 2023-12-26 15:59

马黑黑 发表于 2023-12-26 14:10
还好

特别好{:4_199:}

红影 发表于 2023-12-26 16:01

马黑黑 发表于 2023-12-26 14:10
过得去

这个构思特别棒，终于给黑黑想出怎么用这个效果了{:4_173:}

朵拉 发表于 2023-12-26 16:50

这是高科技，欣赏学习了~~

朵拉 发表于 2023-12-26 16:51

好看极了~~
页: [1] 2 3 4 5
查看完整版本: 巫娜-方寸一席