緑岛小夜曲 TO：冬天的雨
<style>
#papa {left: -400px;top:150px; width: 1389px; height: 647px; background: #eee url('https://wj.zp68.com/lxx/yunhua/2023/06/17/GIF.gif') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute;left: 200px;top:560px; }
#disc { position: absolute; width: 40px; height: 40px; left: 320px; top: 460px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 370px; top: 460px;font: bold 22px / 40px sans-serif; color: #478478; text-shadow: 1px 1px 2px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div style="position: absolute; right:20px; top: 0px; width:180px;">
<img alt="" src="https://wj.zp68.com/lxx/yunhua/2023/06/17/yez.gif"/>
</div>
<div style="position: absolute; right:15px; top:100px; width:180px;">
<img alt="" src="https://wj.zp68.com/lxx/yunhua/2023/06/17/yez.gif"/>
</div>
<canvas id="canv" width="1200" height="180"></canvas>
<span id="disc"></span>
<span id="lrcbox">绿岛小夜曲</span>
</div><br><br><br><br><br><br>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['音乐诗画·春 谁在唱歌 嗓音空过蠢蠢欲动的荒野 划出一抹抹羞涩的浅绿妩媚的春色'];
let lineNow = 0, lineHeight = 20, charIdx = 0;
(function drawText() {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle ='#78a7a4';
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 2;
ctx.shadowColor = '#0e3130';
ctx.font = 'bold 26px snas-serif';
for(let k = 0; k < lineNow; k ++) {
ctx.fillText(txtAr, 40, lineHeight * k + lineHeight);
}
let txtstr = txtAr.substring(0, charIdx);
ctx.fillText(txtstr, 20, lineHeight * lineNow + lineHeight);
charIdx ++;
if(charIdx > txtAr.length) {
lineNow += 1;
charIdx = 0;
}
if(lineNow > txtAr.length - 1) {
setTimeout(function() {
lineNow = 0;
drawText();
}, 10000);
} else {
setTimeout(drawText, 500);
}
})();
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2023/06/17/01.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
</script>
<br><br><br><br><br> @冬天的雨
好久不见了，搞失踪了{:4_203:} 发现黑黑的新字体教程我没有学习，前几天发现好几个没有发过的帖，准备一个个发上来{:4_173:} 这首 緑岛小夜曲是音乐诗画 春专辑里面的第一首曲子，很喜欢音乐诗画 春夏秋冬四个专辑，也是分享过几次了 平时这些纯音乐我也是会一个人 静悄悄的关房间里面欣赏。。。 哈哈，今天有点说离谱了{:4_203:} 欣赏聆听！ 小辣椒 发表于 2023-6-20 21:07
@冬天的雨
好久不见了，搞失踪了
来了，不是高失踪，是以后没有时间玩了 小辣椒 发表于 2023-6-20 21:10
发现黑黑的新字体教程我没有学习，前几天发现好几个没有发过的帖，准备一个个发上来
支持你就这样轻松玩{:4_197:}{:4_185:} 小辣椒 发表于 2023-6-20 21:14
哈哈，今天有点说离谱了
有感而发吧 小辣椒 发表于 2023-6-20 21:14
平时这些纯音乐我也是会一个人 静悄悄的关房间里面欣赏。。。
音乐是一切烦恼的消除剂，欣赏音乐，治愈一切 问好老师，欣赏精彩佳作，点赞！{:4_204:} 画面好美丽啊，有流动的小河，还有房屋白鹤和小鹿，在这样的环境里生活真美好。
欣赏亲爱的好帖，冬小雨收礼开心{:4_187:} 音乐正点，图图正点，帖子正点 小辣椒和冬雨就在那充满生机的绿色世界里牵手吧，{:4_173:}绿色+音乐+小动物都是你俩的最爱 漂亮的画面啊！ 辣椒这个贴子太漂亮了 绿叶清舟 发表于 2023-6-24 19:28
辣椒这个贴子太漂亮了
清舟好久不见，小辣椒也是最近没有好好学习黑黑的东西，找以前的没有发发凑个数了 小辣椒 发表于 2023-6-27 21:30
清舟好久不见，小辣椒也是最近没有好好学习黑黑的东西，找以前的没有发发凑个数了
辣椒好，最近在忙着装修了，到家都累趴了就不开电脑了
页:
[1]
2