芳草地
<style>#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/400.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; left: 20px; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, rgba(200,0,0,.75), rgba(0,255,20,.45)); border-radius: 50%; opacity: 1; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,255,20,.45), rgba(255,0,0,.5) 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; }
#lrc { position: absolute; top: 10px; font: bold 2.6em sans-serif; color: rgba(0,100,20,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 5s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(0,255,20,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#tree { position: absolute; left: 0; width: 300px; mix-blend-mode: multiply; }
#bird { position: absolute; width: 176px; height: 156px; background: transparent url('https://638183.freep.cn/638183/Pic/81/bird3.gif') no-repeat; }
#bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; bottom:-160%; filter: blur(1px); transform:scaleY(-1); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img id="tree" src="https://638183.freep.cn/638183/Pic/81/tree.jpg" alt="" />
<div id="bird"></div>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,];
aud.src = 'https://638183.freep.cn/638183/imusic/fcd.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, rgba(0,255,20,.45), rgba(255,0,0,.5) ' + aud.currentTime / aud.duration * 100 + '%, rgba(255,255,255,.35) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
</script>
种了一棵树，完美融合。这棵树，在归去来兮的荒野也种有。
小鸟水中的倒影，逼真的有点夸张，虽然加入了模糊滤镜。这不是 -webkit-box-reflect 做的，是用了元素：
#bird {
position: absolute;
width: 176px;
height: 156px;
background: transparent url('https://638183.freep.cn/638183/Pic/81/bird3.gif') no-repeat;
}
#bird::after {
content:"";
background-image: inherit;
width: 100%;
height:100%;
position: absolute;
bottom:-160%;
filter: blur(1px);
transform:scaleY(-1);
}
transform:scaleY(-1); 一句，将盒子伪元素的背景图片朝垂直方向与原图倒转。 树是用了滤镜的混合模式，还混得挺协调。
最惊艳的是鸟的倒影，太漂亮了，特别像图图原本就有倒影似的{:4_199:} 马黑黑 发表于 2022-9-28 07:43
小鸟水中的倒影，逼真的有点夸张，虽然加入了模糊滤镜。这不是 -webkit-box-reflect 做的，是用了元素：
...
bottom:-160%; 这个设置挺难想象的。 黑黑又带来新效果{:4_199:} 红影 发表于 2022-9-28 10:07
黑黑又带来新效果
新不新，做的挺用心 红影 发表于 2022-9-28 10:05
bottom:-160%; 这个设置挺难想象的。
那不一样吗？top可是这么设置，针对的是顶边（0在最顶边）；bottom针对的是底边（0在最底边）。 红影 发表于 2022-9-28 10:03
树是用了滤镜的混合模式，还混得挺协调。
最惊艳的是鸟的倒影，太漂亮了，特别像图图原本就有倒影似的{:4_ ...
这个做法，可以考虑做一个猪八戒照镜子 这个效果有点惊艳的，黑黑这颗树种的让人千万种遐想，还想再这颗树下捡一块石头 这歌词绝对同步，真的太完美了 倒影可以这样做出来，真的太惊奇的 小辣椒 发表于 2022-9-28 12:37
倒影可以这样做出来，真的太惊奇的
CSS还是很厉害的 来学习。头还没有我去清醒。先看看。 马黑黑 发表于 2022-9-28 12:20
那不一样吗？top可是这么设置，针对的是顶边（0在最顶边）；bottom针对的是底边（0在最底边）。
bottom的正值是往上移动，负值是往下吧，是针对的height: 156px的底边么？-160%就是从鸟儿图片的底部向下249.6px吧，从底图中心向下327.6 马黑黑 发表于 2022-9-28 12:21
这个做法，可以考虑做一个猪八戒照镜子
还没想好能做什么，但这个绝对好玩{:4_173:} 马黑黑 发表于 2022-9-28 12:19
新不新，做的挺用心
用心制作的都漂亮{:4_187:} 醉美水芙蓉 发表于 2022-9-28 17:33
欣赏黑黑老师精美的特效音画！
感谢支持 红影 发表于 2022-9-28 16:03
用心制作的都漂亮
不漂亮也漂亮{:4_173:}