忆 - 苏曼
<style>
.papa { left: -250px; width: 1100px; height: 700px; background: rgba(0,0,0,.6) url('https://pic.imgdb.cn/item/64130410ebf10e5d5372dbcf.jpg.jpg') no-repeat center / cover; box-shadow: 0 2px 30px #000; overflow: hidden; position: relative; }
.papa::before { position: absolute; content: ''; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/641303f8ebf10e5d53729888.jpg') no-repeat center /cover; opacity: 1; }
.papa:hover::before { animation: rot 4s forwards; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
#canv { position: absolute; bottom: 30px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
@keyframes rot { to { background-position: -1100px -700px; transform: rotate(2turn); } }
</style>
<div class="papa">
<canvas id="canv"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=289073.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let ctx = canv.getContext('2d'),
w = canv.width = 80,
h = canv.height = 60,
lines = [],
total = 20,
lineWidth = (w - 2 * total) / total,
aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=289073.mp3';
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('timeupdate', change);
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
function Line(x1,y1,x2,y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
lines.push(this);
}
Line.prototype.draw = function() {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = lineWidth;
ctx.moveTo(this.x1, this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
}
for(let j = 0; j < total; j ++) {
let line = new Line();
line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
line.y1 = h;
line.x2 = line.x1;
line.y2 = 60;
line.color = 'purple';
line.draw();
}
function change() {
ctx.clearRect(0,0,w,h);
for(let item of lines) {
item.color = '#f9dad8' + Math.random().toString(16).substr(-6);
item.y2 = h - (Math.random() * h);
item.draw();
}
}
</script> 苏曼谁呀？咋个忆法好？ 马黑黑 发表于 2023-3-16 20:32
苏曼谁呀？咋个忆法好？
忘忆法最好{:4_189:} 封面的图图上清舟还细心地留个“点击进入”，是怕来的人忘记鼠标上去么？
其实进帖子鼠标就会滑上去的{:4_173:} 两张图图都好看，很淡雅，里面那张图图的“忆”字很别致。频谱播放器也很漂亮。清舟好帖{:4_187:} 绿叶清舟 发表于 2023-3-16 20:36
忘忆法最好
酱紫。俺都还木有记住就忘记了，也挺好 好久没听苏曼了，特别喜欢听她的《夜晚》和这首《忆》很适合晚上静静的聆听,令人陶醉
清舟制作真有感觉，赞！
{:4_204:}{:4_199:} 马黑黑 发表于 2023-3-16 20:32
苏曼谁呀？咋个忆法好？
小芳知道{:4_189:} 大猫咪 发表于 2023-3-16 20:52
小芳知道
苏小芳改名苏曼了？ 红影 发表于 2023-3-16 20:37
封面的图图上清舟还细心地留个“点击进入”，是怕来的人忘记鼠标上去么？
其实进帖子鼠标就会滑上去的{:4_ ...
现在都有这习惯了吧{:4_189:} 马黑黑 发表于 2023-3-16 20:53
苏小芳改名苏曼了？
差不多故事情节一样都黑 {:5_117:} 大猫咪 发表于 2023-3-16 20:52
好久没听苏曼了，特别喜欢听她的《夜晚》和这首《忆》很适合晚上静静的聆听,令人陶醉
清舟制作真有感觉 ...
猫来了啊，她的歌俺听得不多了 马黑黑 发表于 2023-3-16 20:39
酱紫。俺都还木有记住就忘记了，也挺好
那就不用去记了 绿叶清舟 发表于 2023-3-16 20:54
猫来了啊，她的歌俺听得不多了
听听夜晚清舟 现在听很舒服的{:5_106:} 绿叶清舟 发表于 2023-3-16 20:55
那就不用去记了
省事 大猫咪 发表于 2023-3-16 20:54
差不多故事情节一样都黑
黑黑的颜色，隆重的回忆 马黑黑 发表于 2023-3-16 20:57
黑黑的颜色，隆重的回忆
想念一个人，每当黑黑迷失在黑夜里。做个梦，一切都可以重新开始。。{:5_117:} 大猫咪 发表于 2023-3-16 20:55
听听夜晚清舟 现在听很舒服的
只有酷狗里能听到了 绿叶清舟 发表于 2023-3-16 21:00
只有酷狗里能听到了
嗯嗯 好多链接没了 马黑黑 发表于 2023-3-16 20:56
省事
那多好