天策·天策府
<style>#ma {margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 780px; background: url('https://638183.freep.cn/638183/t24/2/tmce.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #000; overflow: hidden; z-index: 1; position: relative; }
.pa { position: absolute; padding: 20px; top: 60px; left: 50%; }
.pa::before, .pa::after { position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50%; border: 8px double gray; transition: .7s; box-sizing: border-box; }
.pa::before { left: 0; top: 0; border-color: skyblue transparent transparent green; }
.pa::after { right: 0; bottom: 0; border-color: transparent cyan darkred transparent; }
.pa:hover::before, .pa:hover::after { width: 80%; height: 80%; transform: skew(10deg); }
.player { position: relative; cursor: pointer; z-index: 2; animation: rot 10s linear infinite var(--state); }
.vid { position: absolute; width: 80%; height: 20%; left: 380px; bottom: -70px; object-fit: cover; mix-blend-mode: screen; filter: blur(8px) opacity(.75); border-radius: 50% 0; border-radius: 1px solid red; }
.wave { position: absolute; left: 480px; top: 590px; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="ma">
<!-- 天策-天策府 -->
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32845636" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086d380044e.mp4" autoplay loop></video>
<img class="wave" src="https://638183.freep.cn/638183/t22/gif/wave.gif" alt="" />
<div class="pa"><img id="player" class="player" alt="" src="https://638183.freep.cn/638183/small/earth.png" /></div>
</div>
<script>
(function() {
const paNode = document.querySelector('.pa');
const paData = [,];
paData.forEach((e,k) => {
let paClone = paNode.cloneNode(true);
let btn = paClone.querySelector('#player');
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
paClone.style.cssText += `left: ${e}px; top: ${e}px; filter: hue-rotate(${e}deg);`;
ma.appendChild(paClone);
});
aud.onplaying = aud.onpause = () => {
let vids = document.querySelectorAll('.vid'), players = document.querySelectorAll('.player');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
ma.style.setProperty('--state', aud.paused ? 'paused' : 'running');
players.forEach(player => player.title = ['点击暂停','点击播放'][+aud.paused]);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
本帖最后由 马黑黑 于 2024-5-30 08:03 编辑
帖子源码：
《天策·天策府》代码 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 鼠标上去，按钮外的圆环就打开了，这个好玩{:4_205:} 一个个鼠标移动过去，让它们开门放地球{:4_189:} 喷水龙的下方还有漂亮的水波纹，三个地球高悬，这个帖子十分奇妙{:4_199:} 欣赏老师的又一个精彩制作！{:4_199:} 梦江南 发表于 2024-5-30 11:49
欣赏老师的又一个精彩制作！
{:4_190:} 红影 发表于 2024-5-30 09:52
喷水龙的下方还有漂亮的水波纹，三个地球高悬，这个帖子十分奇妙
一般般吧 红影 发表于 2024-5-30 09:45
鼠标上去，按钮外的圆环就打开了，这个好玩
这个等下专门发个类似的效果 马黑黑 发表于 2024-5-30 12:15
这个等下专门发个类似的效果
点击旋转分开，鼠标碰触可以有这样复杂的变化。。{:4_199:} 南无月 发表于 2024-5-30 12:21
点击旋转分开，鼠标碰触可以有这样复杂的变化。。
CSS效果，原理很简单 球体上颜色和边框上的色一致，
球体同一张图片，应是通过滤镜变色，
边框是根据球体变成的色彩设的颜色吧。。。
这个细节也是太到位了{:4_199:} 马黑黑 发表于 2024-5-30 12:22
CSS效果，原理很简单
简单么，看着挺高级，之前没见过类似的效果。。 南无月 发表于 2024-5-30 12:25
简单么，看着挺高级，之前没见过类似的效果。。
做了就有 南无月 发表于 2024-5-30 12:25
球体上颜色和边框上的色一致，
球体同一张图片，应是通过滤镜变色，
边框是根据球体变成的色彩设的颜色吧 ...
原始被克隆对象，边框颜色的设置按需要来。滤镜作用于整体后，克隆结果颜色体系均衡受到滤镜的影响 马黑黑 发表于 2024-5-30 12:27
做了就有
{:4_170:}是灌水灌出来的吧，裂墙来的灵感？ 马黑黑 发表于 2024-5-30 12:29
原始被克隆对象，边框颜色的设置按需要来。滤镜作用于整体后，克隆结果颜色体系均衡受到滤镜的影响
嗯，这个太好了。看了代码大概知道之前的想法，一个个设不太对。。没那么麻烦{:4_170:} 南无月 发表于 2024-5-30 17:59
嗯，这个太好了。看了代码大概知道之前的想法，一个个设不太对。。没那么麻烦
JS做重复性工作，可以通过循环遍历来完成 南无月 发表于 2024-5-30 17:58
是灌水灌出来的吧，裂墙来的灵感？
大概吧，我也不太清楚 马黑黑 发表于 2024-5-30 18:02
JS做重复性工作，可以通过循环遍历来完成
嗯哪，成套的复制过来成套着色。。{:4_199:}