论坛 › 欢乐水吧 › 天外来物

马黑黑 发表于 2023-3-5 09:15

天外来物

<style>
#papa {
        --state: paused; --deg: 1turn;
        margin: -80px 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/1/twlw.jpg') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#btnFs {
        position: absolute;
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid lightblue;
        color: lightblue;
        text-shadow: 1px 1px 1px #000;
        display: none;
        cursor: pointer;
}
#mplayer {
        margin: 200px auto;
        background: tan;
        box-shadow: -10px -10px 30px black inset;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        animation: rot linear 3s infinite var(--state);
        position: relative;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        top: 50px;
        box-shadow:
                100px 100px 30px red,
                -100px 100px 30px navy,
                100px -100px 30px orange,
                -100px -100px 30px olive;
        animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959116081.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let fs = false, timerId;

        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

马黑黑 发表于 2023-3-5 09:15

帖子代码
<style>
#papa {
        --state: paused; --deg: 1turn;
        margin: -80px 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/1/twlw.jpg') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#btnFs {
        position: absolute;
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid lightblue;
        color: lightblue;
        text-shadow: 1px 1px 1px #000;
        display: none;
        cursor: pointer;
}
#mplayer {
        margin: 200px auto;
        background: tan;
        box-shadow: -10px -10px 30px black inset;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        animation: rot linear 3s infinite var(--state);
        position: relative;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        top: 50px;
        box-shadow:
                100px 100px 30px red,
                -100px 100px 30px navy,
                100px -100px 30px orange,
                -100px -100px 30px olive;
        animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959116081.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let fs = false, timerId;

        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

焱鑫磊 发表于 2023-3-5 09:23

欣赏老师的作品！赞！！！{:4_204:}

马黑黑 发表于 2023-3-5 09:27

简单解释

正中央的小星球是播放器（#mplayer），它带两个伪元素 #mplayer::before 和 #mplayer::after，这两个伪元素各拥有四个阴影。

小星球自身旋转，其伪元素原则上会跟着旋转，但帖子希望的效果是其中的一个伪元素应你想旋转，所以在伪元素中依然加入了 animation 属性。当然，针对本帖不加也行，逆向旋转的实现主要还是通过CSS变量 --deg 来完成，::after 伪元素将该变量赋值为 --deg: -2turn; ，必须是负两圈，否则 -1turn 的话将与主元素的 1turn 相抵消，结果是不转，::before 伪元素则和主元素同步旋转。

两个伪元素还设置了不同的 top 位置值，以产生旋转时阴影交错穿插的效果。

只有小星球接受点击操作，阴影没有设计交互动作。

马黑黑 发表于 2023-3-5 09:31

焱鑫磊 发表于 2023-3-5 09:23
欣赏老师的作品！赞！！！

早啊

梦油 发表于 2023-3-5 10:11

动感十足的画面显得生机勃勃。

马黑黑 发表于 2023-3-5 10:13

梦油 发表于 2023-3-5 10:11
动感十足的画面显得生机勃勃。

有一点点活泼

红影 发表于 2023-3-5 10:38

我的天，前一个还没来得及做，后一个新效果就出来了呢{:4_173:}

红影 发表于 2023-3-5 10:40

看到前面一个帖子的4个阴影，这个里面是8个了。前面一个的阴影均匀地分布在四周，原来加入top就可以改变它们的距离了，再加上不逆向转动，就形成了错落有致的效果，这个构思真棒{:4_187:}

红影 发表于 2023-3-5 10:41

这个有点像魔术里扔多个球的感觉。制作真漂亮{:4_199:}

红影 发表于 2023-3-5 10:42

太过活泼了，看大这个帖子，感觉星星都疯了{:4_170:}

梦油 发表于 2023-3-5 10:46

马黑黑 发表于 2023-3-5 10:13
有一点点活泼

是的，整个画面显得生机盎然。

马黑黑 发表于 2023-3-5 10:56

梦油 发表于 2023-3-5 10:46
是的，整个画面显得生机盎然。

看的入眼就好

马黑黑 发表于 2023-3-5 10:57

红影 发表于 2023-3-5 10:38
我的天，前一个还没来得及做，后一个新效果就出来了呢

原理差不多的，就是应用上加入了一些机制

马黑黑 发表于 2023-3-5 10:57

红影 发表于 2023-3-5 10:40
看到前面一个帖子的4个阴影，这个里面是8个了。前面一个的阴影均匀地分布在四周，原来加入top就可以改变它 ...

两个伪元素各有四个阴影，放在一起设计的

马黑黑 发表于 2023-3-5 10:58

红影 发表于 2023-3-5 10:41
这个有点像魔术里扔多个球的感觉。制作真漂亮

还行的

马黑黑 发表于 2023-3-5 10:58

红影 发表于 2023-3-5 10:42
太过活泼了，看大这个帖子，感觉星星都疯了

人没疯就好{:4_170:}

梦油 发表于 2023-3-5 11:12

马黑黑 发表于 2023-3-5 10:56
看的入眼就好

你的代码操作水平很了得。

醉美水芙蓉 发表于 2023-3-5 11:19

马黑黑 发表于 2023-3-5 11:25

醉美水芙蓉 发表于 2023-3-5 11:19
欣赏老师佳作！

感谢支持

查看完整版本: 天外来物