论坛 › 欢乐水吧 › 我们害怕你们

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

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

红影 发表于 2023-4-13 21:53

黑黑这是怕谁啊，怕那对情侣么{:4_173:}

红影 发表于 2023-4-13 22:00

还以为是css-doodle的实例，好像不是？这个是把四叶草拆开来分别写的么。

一斛珠 发表于 2023-4-13 22:02

好亲密啊，我们需不需要闭眼啊哈。

红影 发表于 2023-4-13 22:22

这个分别写了4个叶片，并用float: left排布到位。遇到3叶或5叶就不行了吧，肯定需要用到旋转角了{:4_173:}

马黑黑 发表于 2023-4-13 22:41

红影 发表于 2023-4-13 22:22
这个分别写了4个叶片，并用float: left排布到位。遇到3叶或5叶就不行了吧，肯定需要用到旋转角了

刚占满空间的可以用float布局，好控制。其它的条件下，用定位

马黑黑 发表于 2023-4-13 22:41

红影 发表于 2023-4-13 21:53
黑黑这是怕谁啊，怕那对情侣么

了解三体的就知道这个帖子的意思

马黑黑 发表于 2023-4-13 22:41

红影 发表于 2023-4-13 22:00
还以为是css-doodle的实例，好像不是？这个是把四叶草拆开来分别写的么。

css-doodle在论坛里用不上的

马黑黑 发表于 2023-4-13 22:42

一斛珠 发表于 2023-4-13 22:02
好亲密啊，我们需不需要闭眼啊哈。

木有必要

梦缘 发表于 2023-4-14 10:56

感谢分享，很有意境。{:4_173:}

马黑黑 发表于 2023-4-14 12:00

梦缘 发表于 2023-4-14 10:56
感谢分享，很有意境。

中午好

樵歌 发表于 2023-4-14 14:03

俺啥子也木看见，你们继续{:4_173:}

马黑黑 发表于 2023-4-14 18:15

樵歌 发表于 2023-4-14 14:03
俺啥子也木看见，你们继续

太黑没看见正常{:5_106:}

雨中悄然 发表于 2023-4-14 18:36

三体经典台词之一。。跟”不要回答““整个宇宙都为你闪烁”“主不在乎”一样经典

马黑黑 发表于 2023-4-14 19:43

雨中悄然 发表于 2023-4-14 18:36
三体经典台词之一。。跟”不要回答““整个宇宙都为你闪烁”“主不在乎”一样经典

你是三体迷

绿叶清舟 发表于 2023-4-14 19:54

再害怕也要来到

红影 发表于 2023-4-14 19:59

马黑黑 发表于 2023-4-13 22:41
刚占满空间的可以用float布局，好控制。其它的条件下，用定位

嗯嗯，明白了{:4_204:}

红影 发表于 2023-4-14 20:00

马黑黑 发表于 2023-4-13 22:41
了解三体的就知道这个帖子的意思

三体老早以前看过，已经忘得差不多了{:4_173:}

红影 发表于 2023-4-14 20:01

马黑黑 发表于 2023-4-13 22:41
css-doodle在论坛里用不上的

好在黑黑能用其他方式写出来，否则还真没办法了。{:4_204:}

查看完整版本: 我们害怕你们