西班牙斗牛士

马黑黑 发表于 2023-4-4 20:31

马黑黑 发表于 2023-4-4 20:31

本帖最后由马黑黑于 2023-4-4 20:35 编辑

参考代码
<style>
#papa {
   margin: auto;
   width: 1024px;
   height: 640px;
   background: url('https://638183.freep.cn/638183/t23/webp/dznq.webp') center/cover no-repeat;
   box-shadow: 3px 3px 20px #000;
   position: relative;
   z-index: 1;
}
#wrap {
   position: absolute;
   right: 10px;
   bottom: 10px;
   width: 240px;
   height: 240px;
   cursor: pointer;
   --deg: -15deg;
}
#wrap::before, #wrap::after {
   position: absolute;
   content: '';
}
#wrap::before {
   width: 200px;
   height: 200px;
   background: url('https://638183.freep.cn/638183/t23/btn/ihvf.png') center/cover no-repeat;
   top: -12px;
   right: -12px;
   transition: .12s;
   transform-origin: 180px 20px;
   transform: rotate(var(--deg));
   z-index: 10;
   animation: var(--chg);
}
#wrap::after {
   content: attr(data-tt);
   width: 100%;
   text-align: center;
   color: red;
}
#pan {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
   background-size: 50% 100%, 100% 50%, 100% 100%;
   bottom: 0;
   position: absolute;
   animation: rot 6s infinite linear var(--state);
   --state: paused;
}
#pan::before {
   position: absolute;
   content: '';
   top: 50%; left: 50%;
   margin: -35px;
   border: solid 1px #d9a388;
   width: 68px; height: 68px;
   border-radius: 50%;
   box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
   background: #b5ac9a;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
   <div id="wrap" title="点击运行" data-tt="00:00 | 00:00">
            <div id="pan"></div>
   </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2024168667" loop="loop" autoplay="autoplay"></audio>

<script>
let mState = () => aud.paused ? (pan.style.setProperty('--state', 'paused'), wrap.style.setProperty('--deg','-15deg')) : pan.style.setProperty('--state', 'running');
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
            sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
};
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
   let angle = -3 + (aud.currentTime * 28 / aud.duration || 0);
   wrap.style.setProperty('--deg', angle + 'deg');
   wrap.dataset.tt = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
</script>

小辣椒 发表于 2023-4-4 20:34

哇塞，好震撼{:4_178:}

小辣椒 发表于 2023-4-4 20:36

这个是转盘播放器的，纯代码制作，太佩服了{:4_199:}

马黑黑 发表于 2023-4-4 20:41

小辣椒发表于 2023-4-4 20:34
哇塞，好震撼

这个帖子，是为了测试下亚伦的设想

马黑黑 发表于 2023-4-4 20:43

小辣椒发表于 2023-4-4 20:36
这个是转盘播放器的，纯代码制作，太佩服了

那个唱针，是亚伦帖子里的图片

千羽发表于 2023-4-4 20:45

惊险刺激的画面，不知道牛的另一只角在哪里？{:4_201:}

马黑黑 发表于 2023-4-4 20:46

千羽发表于 2023-4-4 20:45
惊险刺激的画面，不知道牛的另一只角在哪里？

在斗牛士的体内

千羽发表于 2023-4-4 20:46

播放器漂亮，音乐很好听{:4_187:}

马黑黑 发表于 2023-4-4 20:47

千羽发表于 2023-4-4 20:46
播放器漂亮，音乐很好听
播放器是应亚伦的邀请弄的

千羽发表于 2023-4-4 20:48

马黑黑发表于 2023-4-4 20:46
在斗牛士的体内

很血腥，很残忍

马黑黑 发表于 2023-4-4 20:48

千羽发表于 2023-4-4 20:48
很血腥，很残忍

斗牛就是酱紫

千羽发表于 2023-4-4 20:49

马黑黑发表于 2023-4-4 20:47
播放器是应亚伦的邀请弄的

黑黑老师有求必应，代码超高手一枚{:4_187:}

千羽发表于 2023-4-4 20:50

马黑黑发表于 2023-4-4 20:48
斗牛就是酱紫

选个愉快场景会更好{:4_203:}

马黑黑 发表于 2023-4-4 20:50

千羽发表于 2023-4-4 20:49
黑黑老师有求必应，代码超高手一枚

也不是有求必应，看情况，多数情况下我一般只给建议

马黑黑 发表于 2023-4-4 20:50

千羽发表于 2023-4-4 20:50
选个愉快场景会更好

有，斗鸡{:4_170:}

千羽发表于 2023-4-4 20:50

马黑黑发表于 2023-4-4 20:50
也不是有求必应，看情况，多数情况下我一般只给建议

哈哈，在云端的感觉{:4_173:}

千羽发表于 2023-4-4 20:51

马黑黑发表于 2023-4-4 20:50
有，斗鸡

好啊，发上来{:4_199:}

红影发表于 2023-4-4 20:51

这个制作好棒，暂停后，指针会移开，但是继续播放，还能回到缓慢在唱片上走动后的位置{:4_199:}

红影发表于 2023-4-4 20:55

一直到听完，指针直接回到-15度的地方了{:4_173:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

西班牙斗牛士