小辣椒 发表于 2023-4-17 23:00

套一个黑黑的（我们害怕你们播放器效果）


<style>
#papa {margin: 120px 0 0 calc(50% - 780px);width: 1373px;height: 780px;background: #666 url('https://yinhua.ru/20221211/012.jpg') 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(120,100,80,.85);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: 1280px;top: 0px;right: -1200px;transform: rotate(360deg);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://wj.zp68.com/lxx/yunhua/2022/12/11/1IF.gif" />
        <div id="clover4">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
</div>
<audio id="aud" src="https://yinhua.ru/20221211/zcj.mp3" 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>
<br><br><br><br>

小辣椒 发表于 2023-4-17 23:01

@马黑黑

纯套用一个玩玩{:4_173:}

马黑黑 发表于 2023-4-17 23:43

小辣椒 发表于 2023-4-17 23:01
@马黑黑

纯套用一个玩玩

{:4_187:}

马黑黑 发表于 2023-4-17 23:43

漂亮

小辣椒 发表于 2023-4-17 23:46

马黑黑 发表于 2023-4-17 23:43
漂亮

黑黑又抄了个作业，明天发了，今天太迟了{:4_173:}

马黑黑 发表于 2023-4-17 23:47

小辣椒 发表于 2023-4-17 23:46
黑黑又抄了个作业，明天发了，今天太迟了

不要太辛苦

小辣椒 发表于 2023-4-17 23:49

马黑黑 发表于 2023-4-17 23:47
不要太辛苦

是准备下了，太迟的，黑黑晚安~~

马黑黑 发表于 2023-4-17 23:51

88

亦是金 发表于 2023-4-18 09:33

欣赏小辣椒的美帖！{:4_187:}

红影 发表于 2023-4-18 09:36

漂亮，亲爱的还弄了漂移的动图呢{:4_187:}

红影 发表于 2023-4-18 09:37

四叶草还能控制动图的移动，让那动图停留在想要的地方{:4_173:}

梦油 发表于 2023-4-18 09:38

很有创意的制作。

梦缘 发表于 2023-4-18 19:30

欣赏好听的歌，感谢分享！{:4_187:}
页: [1]
查看完整版本: 套一个黑黑的（我们害怕你们播放器效果）