论坛 › 欢乐水吧 › 东篱的阴天

马黑黑 发表于 2023-3-6 20:18

东篱的阴天

本帖最后由 马黑黑 于 2023-3-6 20:20 编辑 <br /><br /><style>
#papa {
        --state: paused;
        margin: -80px 0 0 calc(50% - 781px);
        width: 1400px;
        height: 800px;
        background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        pointer-events: none;
        z-index: 1;
}
#papa::before {
        position: absolute;
        content: '';
        pointer-events: auto;
        left: 154px;
        top: 253px;
        width: 206px;
        height: 135px;
        background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') -154px -253px;
        border-radius: 50%;
        cursor: pointer;
        animation: scale .6s infinite alternate var(--state);
}
@keyframes scale { to { transform: scale(1.2) skew(8deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=265951.mp3" loop autoplay></audio>
</div>

<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

马黑黑 发表于 2023-3-6 20:19

帖子代码
<style>
#papa {
        --state: paused;
        margin: 80px 0 0 calc(50% - 781px);
        width: 1400px;
        height: 800px;
        background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        pointer-events: none;
        z-index: 1;
}
#papa::before {
        position: absolute;
        content: '';
        pointer-events: auto;
        left: 154px;
        top: 253px;
        width: 206px;
        height: 135px;
        background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') -154px -253px;
        border-radius: 50%;
        cursor: pointer;
        animation: scale .6s infinite alternate var(--state);
}
@keyframes scale { to { transform: scale(1.2) skew(8deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=265951.mp3" loop autoplay></audio>
</div>

<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

马黑黑 发表于 2023-3-6 20:20

不多不少，38行代码！偷东篱的帖子祝女王们女王节快乐！

梦缘 发表于 2023-3-6 20:22

感谢老师的代码，不错啊！{:4_172:}

花飞飞 发表于 2023-3-6 20:27

马黑黑 发表于 2023-3-6 20:20
不多不少，38行代码！偷东篱的帖子祝女王们女王节快乐！

代码巧妙{:4_199:}

红影 发表于 2023-3-6 20:29

好玩，把那把伞抓出来，单独做了特效呢{:4_187:}

红影 发表于 2023-3-6 20:31

也无风雨也无晴==阴天
这是什么神思维{:4_170:}

醉美水芙蓉 发表于 2023-3-6 20:32

醉美水芙蓉 发表于 2023-3-6 20:37

马黑黑 发表于 2023-3-6 21:31

醉美水芙蓉 发表于 2023-3-6 20:37
为啥只有伞会缩小和放大？

是斗笠

马黑黑 发表于 2023-3-6 21:32

梦缘 发表于 2023-3-6 20:22
感谢老师的代码，不错啊！

还行

马黑黑 发表于 2023-3-6 21:32

花飞飞 发表于 2023-3-6 20:27
代码巧妙

还不差

马黑黑 发表于 2023-3-6 21:32

红影 发表于 2023-3-6 20:29
好玩，把那把伞抓出来，单独做了特效呢

是斗笠

马黑黑 发表于 2023-3-6 21:33

红影 发表于 2023-3-6 20:31
也无风雨也无晴==阴天
这是什么神思维

反正东篱承认了

马黑黑 发表于 2023-3-6 21:33

醉美水芙蓉 发表于 2023-3-6 20:32
伞变成播放器了！

好玩不

焱鑫磊 发表于 2023-3-6 21:47

欣赏老师佳作！{:4_204:}

马黑黑 发表于 2023-3-6 21:49

焱鑫磊 发表于 2023-3-6 21:47
欣赏老师佳作！

东篱的

雨中悄然 发表于 2023-3-6 22:30

老师的贴子要支持{:4_187:}

马黑黑 发表于 2023-3-6 22:38

雨中悄然 发表于 2023-3-6 22:30
老师的贴子要支持

感谢支持

庶民 发表于 2023-3-7 04:59

代码玩的舒畅。

查看完整版本: 东篱的阴天