问梅觅春
<style>#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; }
#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; }
#papa img { position: absolute; top: 420px; left: 52%; mix-blend-mode: multiply; filter: blur(.5px) opacity(.9); }
#papa img:nth-of-type(2) { transform: translate(0, 110px) scale(1,-1); filter: blur(2px); }
@keyframes bright { to { filter: brightness(1.3); } }
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1430643126" autoplay loop></audio>
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
帖子代码
<style>
#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; }
#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; }
#papa img { position: absolute; top: 420px; left: 52%; mix-blend-mode: multiply; filter: blur(.5px) opacity(.9); }
#papa img:nth-of-type(2) { transform: translate(0, 110px) scale(1,-1); filter: blur(2px); }
@keyframes bright { to { filter: brightness(1.3); } }
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1430643126" autoplay loop></audio>
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
两张背景图的混合好漂亮啊，还能亮度变化呢，含了春来的喜悦{:4_187:} 小鸟的倒影也非常漂亮，位置调得真好，正好站在梅枝上{:4_187:} 这个混合太棒了，明暗的变化也带来不同的画面质感呢{:4_199:} 红影 发表于 2024-2-13 20:56
这个混合太棒了，明暗的变化也带来不同的画面质感呢
{:4_190:} 马黑黑 发表于 2024-2-13 22:20
学习了{:4_187:} 鸟儿枝上站，花儿好喜欢。{:4_173:} 鸟儿不断点头，表示同意{:4_189:} 樵歌 发表于 2024-2-14 07:41
鸟儿不断点头，表示同意
{:4_181:} 樵歌 发表于 2024-2-14 07:41
鸟儿枝上站，花儿好喜欢。
鸟问花儿，还是花儿问鸟？ 初春进花潮。{:4_199:} 初春进花潮。{:4_199:} 梦油 发表于 2024-2-14 10:28
初春进花潮。
{:4_181:} 马黑黑 发表于 2024-2-14 08:08
你乍也跟着呀{:4_170:} 樵歌 发表于 2024-2-14 20:09
你乍也跟着呀
跟跟更健康 马黑黑 发表于 2024-2-14 08:09
鸟问花儿，还是花儿问鸟？
没听清楚，它俩说悄悄活呢{:4_189:} 樵歌 发表于 2024-2-14 20:11
没听清楚，它俩说悄悄活呢
把声音放大一点
页:
[1]
2