飞天乐舞

马黑黑 · 发表于 2023-3-29 08:07

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

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

x

本帖最后由马黑黑于 2023-3-29 08:09 编辑

马黑黑 · 发表于 2023-3-29 08:09

帖子代码

<style>
#papa { --state: running; --delay: 0s; margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: black url('https://638183.freep.cn/638183/t23/1/65.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/btn/star.png'); animation: flash 1s var(--delay) infinite alternate var(--state); }
#papa::after { left: 400px; --delay: .5s; }
#mydiv { position: absolute; left: 50%; bottom: 100px; width: 100px; height: 120px; border-style: solid; border-color: transparent transparent hsla(0, 0%,100%, .45) transparent; border-width: 20px 120px 120px 120px; border-radius: 50%; box-shadow: 20px 20px 30px snow inset, -20px -20px 30px snow inset; filter: drop-shadow(-500px -100px 0 silver); cursor: pointer; transform: rotate(15deg); animation: fly 4s infinite alternate var(--state); }
#mydiv::before, #mydiv::after { position: absolute; content: ''; border-radius: 100%; background: silver; top: -5px; animation: rot .5s infinite linear var(--state); }
#mydiv::before { width: 100px; height: 10px; }
#mydiv::after { width: 10px; height: 100px; left: calc(50% - 5px); top: -50px; }
@keyframes fly { 10% { bottom: 120px; left: 50%; } 20% { bottom: 140px; left: 55%; } 50% { bottom: 100px; left: 50%; } }
@keyframes rot { from { transform: rotateX(60deg) rotateZ(0); } to { transform: rotateX(60deg) rotateZ(360deg); } }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0; transform: rotate(5deg); } }
</style>
<div id="papa">
<div id="mydiv"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=332655" loop autoplay></audio>
<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>