西班牙斗牛士

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>