问梅觅春

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/wwmw1.jpeg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/jpg/wfmw0.jpeg') no-repeat center/cover, radial-gradient(transparent, blue); background-blend-mode: screen, saturation; filter: brightness(.5); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; animation: bright 25s linear infinite alternate var(--state); pointer-events: none; }
   
3. #papa::before { position: absolute; content: ''; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/t24/jpg/wwmw1.jpeg') no-repeat center/cover; box-shadow: inset 0 0 18px lightblue; opacity: .9; border-radius: 50%; left: calc(50% - 100px); top: 20px; animation: rot 5s linear infinite var(--state); cursor: pointer; pointer-events: auto; }
   
4. #papa img { position: absolute; top: 420px; left: 52%; mix-blend-mode: multiply; filter: blur(.5px) opacity(.9); }
   
5. #papa img:nth-of-type(2) { transform: translate(0, 110px) scale(1,-1); filter: blur(2px); }
   
6. @keyframes bright { to { filter: brightness(1.3); } }
   
7. @keyframes rot { to {transform: rotate(1turn); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1430643126" autoplay loop></audio>
    
12.         <img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
    
13.         <img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
    
14. </div>
    
15. 
    
16. <script>
    
17. var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
18. aud.addEventListener('playing', mState);
    
19. aud.addEventListener('pause', mState);
    
20. papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
21. </script>

复制代码

红影

两张背景图的混合好漂亮啊，还能亮度变化呢，含了春来的喜悦

红影

小鸟的倒影也非常漂亮，位置调得真好，正好站在梅枝上

红影

这个混合太棒了，明暗的变化也带来不同的画面质感呢

马黑黑

红影 发表于 2024-2-13 20:56
这个混合太棒了，明暗的变化也带来不同的画面质感呢

红影

马黑黑 发表于 2024-2-13 22:20

学习了

樵歌

鸟儿枝上站，花儿好喜欢。

樵歌

鸟儿不断点头，表示同意

马黑黑

樵歌 发表于 2024-2-14 07:41
鸟儿不断点头，表示同意

马黑黑

樵歌 发表于 2024-2-14 07:41
鸟儿枝上站，花儿好喜欢。

鸟问花儿，还是花儿问鸟？

梦油

初春进花潮。

梦油

初春进花潮。

马黑黑

梦油 发表于 2024-2-14 10:28
初春进花潮。

樵歌

马黑黑 发表于 2024-2-14 08:08

你乍也跟着呀

马黑黑

樵歌 发表于 2024-2-14 20:09
你乍也跟着呀

跟跟更健康

樵歌

马黑黑 发表于 2024-2-14 08:09
鸟问花儿，还是花儿问鸟？

没听清楚，它俩说悄悄活呢

马黑黑

樵歌 发表于 2024-2-14 20:11
没听清楚，它俩说悄悄活呢

把声音放大一点