请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
《天策·天策府》一帖，播放器使用容器div元素+按钮图片做成，主要特色是双线边框响应设备指针的动画，使用容器元素的伪元素实现。播放器通过JS节点克隆技术复制多份，克隆的按钮具备原生按钮的一切属性和功能并有一定的差异性。帖子代码：
<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 = [[160,240,105,120],[1000,200,225,160]];
paData.forEach((e,k) => {
let paClone = paNode.cloneNode(true);
let btn = paClone.querySelector('#player');
btn.id = 'player' + k;
btn.style.width = e[3] + 'px';
btn.onclick = () => player.click();
paClone.style.cssText += `left: ${e[0]}px; top: ${e[1]}px; filter: hue-rotate(${e[2]}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:01
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-30 12:33
这么行那么行老师怎么整都得行
