我们害怕你们

马黑黑 · 发表于 2023-4-13 21:43

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

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

x

马黑黑 · 发表于 2023-4-13 21:43

帖子代码

<style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: #666 url('https://638183.freep.cn/638183/t23/webp1/afraid.webp') center/cover no-repeat;box-shadow: 3px 3px 20px #000;overflow: hidden;position: relative;z-index: 1;--state: paused;}
#clover4 {position: absolute;left: 50%;top: 120px;width: 80px;height: 80px;cursor: pointer;animation: rot 4s infinite linear var(--state);}
#clover4 > div {width: 50%;height: 50%;float: left;background: rgba(100,90,50,.5);transition: all .6s;}
#clover4 > div:nth-of-type(1) {border-radius: 0 50% 0 50%;}
#clover4 > div:nth-of-type(2) {border-radius: 50% 0 50% 0;}
#clover4 > div:nth-of-type(3) {border-radius: 50% 0 50% 0;}
#clover4 > div:nth-of-type(4) {border-radius: 0 50% 0 50%;}
.mypic {position: absolute;width: 200px;right: -120px;transform: rotate(30deg);mix-blend-mode: difference;animation: fly 14s infinite linear var(--state);}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { right: 940px; } }
</style>
<div id="papa">
<img class="mypic" alt="" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" />
<div id="clover4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1431299153" loop="loop" autoplay="autoplay"></audio>
<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
clover4.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>