Returning to Now - 学习马黑黑响应式频谱
<style>
#papa { margin: 100px 0 0 calc(50% - 681px);width: 1200px; height: 675px; overflow: hidden; background: gray url('https://pic.imgdb.cn/item/63935d5db1fccdcd36782b56.jpg') no-repeat center/cover; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72);display: grid; place-items: center; position: relative; z-index: 1; }
.mLine::before { position: absolute; content: ''; width: 100%; height:3px; background: snow; top: -3px; }
.tit { position: absolute; top: 80px; font: italic 4em Georgia,serif; color: hsla(40,80%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px #EBD2AD, 5px 5px 10px #EBD2AD; animation: flash 3s infinite alternate linear; }
.flyBox { --w: 200px; width: var(--w); overflow: hidden;position: absolute; bottom: 160px; right:20px; z-index: 10;}
.flyBox div { word-break: keep-all; white-space: nowrap; color: #000; text-shadow: 1px 1px 1px snow;animation: fly 16s linear infinite; }
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(-10% - var(--w))); } }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px #E87529, 5px 5px 20px #C75D17; } }
</style>
<div id="papa"><div class="tit">Returning to Now</div>
<div class="flyBox">
<div>侃大山习作，感谢<span style="color: blue;">马黑黑</span>老师代码</div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1614697.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: `<style>#mplayer { --ww: 300px; --hh: 160px; --pinpu: linear-gradient(to top,darkgreen,snow); position: absolute; bottom: 0px; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; }.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 8px; background: var(--pinpu); transition: .55s; opacity: .95; }</style><div id="mplayer"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);
ypData = ;
HCPlayer({
ypData: ypData,
player_css: '--ww: 100%; --hh: 200px; --pinpu: linear-gradient(to top,#DD6D22,#D7D718,#AAEED3); align-items: flex-end;',
});
})();
</script> 交个作业拜山了，马黑黑老师的代码很强大，我是来学习的{:4_204:} 这个频谱正好把下面不需要的那块遮挡了，而且还不影响整体，这个频谱太好了。 标题文字效果也是从马老师那套用的，还有滚动字。一并感谢{:4_204:} 好看，帖子的场景好像失落的世界。欣赏侃大山好帖{:4_187:} 侃大山 发表于 2022-12-10 11:04
交个作业拜山了，马黑黑老师的代码很强大，我是来学习的
{:5_108:} 欣赏老师的精美分享，问好！{:4_190:} 红影 发表于 2022-12-10 11:26
好看，帖子的场景好像失落的世界。欣赏侃大山好帖
有没有迷失在里面？{:5_106:} 马黑黑 发表于 2022-12-10 19:39
谢谢马老师的代码和无私精神。 梦缘 发表于 2022-12-10 20:07
欣赏老师的精美分享，问好！
多谢老师鼓励。 侃大山 发表于 2022-12-12 20:50
谢谢马老师的代码和无私精神。
一起学习 马黑黑 发表于 2022-12-12 20:53
一起学习
谢谢，空了肯定来，这么好东西。 侃大山 发表于 2022-12-12 20:57
谢谢，空了肯定来，这么好东西。
希望多多交流 马黑黑 发表于 2022-12-12 20:59
希望多多交流
我就跟着学学，没本事的人，哈哈 侃大山 发表于 2022-12-12 21:01
我就跟着学学，没本事的人，哈哈
每个人都有自己擅长的，即使是在自己不太熟悉的领域 马黑黑 发表于 2022-12-12 21:25
每个人都有自己擅长的，即使是在自己不太熟悉的领域
不熟悉的领域，更不可能擅长了{:5_106:} 侃大山 发表于 2022-12-12 20:48
有没有迷失在里面？
我有导航，不会的{:4_173:} 侃大山 发表于 2022-12-12 21:38
不熟悉的领域，更不可能擅长了
会有的，只是都不敢出声 这个作业做的精彩，欢迎新朋友{:4_187:} 频谱色彩和背景图很融合，高手啊{:4_178:}