暗香（学习黑黑芳草地倒影效果）
<style>#papa { left: -344px; width: 1280px; height: 704px; top: 150px;background: #ccc url('https://pic1.imgdb.cn/item/6335807f16f2c2beb16ffaa6.gif') 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;top: 600px;left: 900px; width: 200px; height: 70px; 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: 200px; 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: 110px; 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: 550; width: 200px; height: 280px; top: 320px; mix-blend-mode: multiply; }
#bird { position: absolute; width: 100px; height: 100px; background: transparent url('https://pic1.imgdb.cn/item/6335809a16f2c2beb170113d.gif') no-repeat; }
#bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; bottom:-140%; 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://pic1.imgdb.cn/item/62f71a7416f2c2beb19a754f.gif" 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://music.163.com/song/media/outer/url?id=407007146.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>
<br><br><br><br><br><br><br><br><br><br> 漂亮的素材找不到，就用了只蝴蝶，改了改小，反正是学会运用效果 黑黑，我又是求速度的，可以说秒做，所以离你的要求还很远{:4_189:} @马黑黑
大神检查作业 绿与黑相配是绝好的色调，与暗香主题贴合。帖子动静结合，以静为主调，这又和主题相配了——暗香，不宜置于过度动感的氛围中的。
好帖，欣赏佳作！赞了。 我看还是小点好看，那小蝴蝶，小蜜蜂多可爱啊！ 马黑黑 发表于 2022-9-29 20:06
绿与黑相配是绝好的色调，与暗香主题贴合。帖子动静结合，以静为主调，这又和主题相配了——暗香，不宜置于 ...
哇瑟~~谢谢黑黑的教程分享，这次我没有好好做同步，求速度{:4_170:}
长假了会有点时间玩了 梦油 发表于 2022-9-29 20:06
我看还是小点好看，那小蝴蝶，小蜜蜂多可爱啊！
谢谢梦油欣赏{:4_187:} 小辣椒 发表于 2022-9-29 20:08
哇瑟~~谢谢黑黑的教程分享，这次我没有好好做同步，求速度
长假了会有点时间玩了
经验独到，假以时日，各方面新知识融汇之后，估计还要上一个档次 马黑黑 发表于 2022-9-29 20:10
经验独到，假以时日，各方面新知识融汇之后，估计还要上一个档次
难度感觉很大，那得努力学习了 制作得太漂亮了。我喜欢！{:4_199:} 小辣椒 发表于 2022-9-29 20:09
谢谢梦油欣赏
国庆假期你一定有个很好的出游计划吧，祝你节日快乐！ 小辣椒做得好精巧，亮眼的作品{:4_187:} 歌儿也好听{:4_185:} 小辣椒 发表于 2022-9-29 20:12
难度感觉很大，那得努力学习了
慢慢适应新的方法 好漂亮，这些色彩以及动图效果，搭配都好漂亮，亲爱的真棒{:4_199:} 帖子氛围营造得真好，和歌曲的意境完全吻合，太赞了{:4_199:} 欣赏代码音画佳作！祝国庆节快乐！
页:
[1]