论坛 › 现代文学 › 【末伏消暑】第六天 欢（沙塞子）

红影 发表于 2022-8-20 20:53

【末伏消暑】第六天 欢（沙塞子）

<style>
#papa {left: -212px; top:120px; width: 1024px; height: 606px; background: #eee url('https://pic.imgdb.cn/item/6300ab4216f2c2beb1ce83c4.jpg') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; left: 320px; top: 400px; }
#disc { position: absolute; width: 40px; height: 40px; left: 20px; bottom: 40px; 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: 70px; bottom: 40px;font: bold 22px / 40px sans-serif; color: #666; text-shadow: 2px 2px 4px #222;opacity: .45; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div style="position: absolute; right:66px; top: 10px; width:180px;">
                <img alt="" src="https://pic.imgdb.cn/item/62feee2816f2c2beb1d1f8bf.gif"/>
                </div>
<div style="position: absolute; left:210px; top: 0px; width:480px; opacity: .15;">
                <img alt="" src="https://pic.imgdb.cn/item/62cf961cf54cd3f937350f7d.gif"/>
                </div>
      <canvas id="canv" width="320" height="160"></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 step = 0.1, yy = h;
let txtAr = [
      '【末伏消暑】沙塞子·无题',
      '　　　　　',      
      '小院炉烟香袅，云淡淡，落花闲。',
      '镇日闭门心静，避尘喧。',
      '　　　　　',
      '看透世间浮幻，无所系，海天宽。',
      '诗酒常随朝暮，享清欢。'
];

(function moveText() {
      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle = '#9090F7';
      ctx.font = 'bold 18px 黑体';
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 2;
      ctx.shadowBlur = 4;
      ctx.shadowColor = '#222';
      let hy = yy;
      for(j = 0; j< txtAr.length; j ++) {
                hy +=18;
                ctx.fillText(txtAr, 10, hy);
      }
      yy -= step; //yy变量自增
      if (yy <= -130) yy = h;
      requestAnimationFrame(moveText);
})();
let aud = new Audio();      
aud.src = 'https://music.163.com/song/media/outer/url?id=304955.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>

红影 发表于 2022-8-20 20:53

沙塞子·无题

小院炉烟香袅，云淡淡，落花闲。
镇日闭门心静，避尘喧。
看透世间浮幻，无所系，海天宽。
诗酒常随朝暮，享清欢。

红影 发表于 2022-8-20 20:54

在学习个黑黑整首诗词上移的效果，谢谢黑黑的代码@马黑黑{:4_187:}

红影 发表于 2022-8-20 20:55

跟着师兄一起塞把沙子玩{:4_173:}

醉美水芙蓉 发表于 2022-8-20 20:57

马黑黑 发表于 2022-8-20 21:05

玩沙呀{:5_117:}

樵歌 发表于 2022-8-20 21:08

画面和词的意境相互加持，更马术增辉，美得今人不想眨眼。

樵歌 发表于 2022-8-20 21:09

红影 发表于 2022-8-20 20:55
跟着师兄一起塞把沙子玩

师兄用的河沙，师妹这是玩的金沙{:4_173:}

小辣椒 发表于 2022-8-20 21:57

亲爱的，特棒{:4_178:}

小辣椒 发表于 2022-8-20 21:58

黑黑这些滚动字效果运用的太棒了{:4_199:}

小辣椒 发表于 2022-8-20 22:00

樵歌 发表于 2022-8-20 21:08
画面和词的意境相互加持，更马术增辉，美得今人不想眨眼。

樵哥哥，你这些诗词可以套用红影的代码，太漂亮了

红影 发表于 2022-8-20 23:05

醉美水芙蓉 发表于 2022-8-20 20:57
红影美女是个才女，样样精通！

这个也是黑黑的代码，特别适合玩诗词，就跟着玩了个{:4_204:}

红影 发表于 2022-8-20 23:06

马黑黑 发表于 2022-8-20 21:05
玩沙呀

这词牌名特别好玩，为这个笑了好长时间的{:4_173:}

马黑黑 发表于 2022-8-20 23:06

红影 发表于 2022-8-20 23:06
这词牌名特别好玩，为这个笑了好长时间的

很好玩的

红影 发表于 2022-8-20 23:07

樵歌 发表于 2022-8-20 21:08
画面和词的意境相互加持，更马术增辉，美得今人不想眨眼。

是师兄出的字好，看到欢字，先想到清欢，然后去凑其他的字{:4_173:}

红影 发表于 2022-8-20 23:08

樵歌 发表于 2022-8-20 21:09
师兄用的河沙，师妹这是玩的金沙

镀金是用的黑黑的代码镀的，不是我的功劳{:4_173:}

红影 发表于 2022-8-20 23:09

小辣椒 发表于 2022-8-20 21:57
亲爱的，特棒

谢谢亲爱的{:4_179:}

红影 发表于 2022-8-20 23:10

小辣椒 发表于 2022-8-20 21:58
黑黑这些滚动字效果运用的太棒了

是啊，看到他的滚动字的帖子的时候，就想着要做帖了，这个代码太适合诗词了{:4_173:}

上海朝阳 发表于 2022-8-21 08:37

看图写诗，入景入诗，再合配在音画里，太美了。

顾-念 发表于 2022-8-21 09:02

整的高端大气上档次

有意境！

查看完整版本: 【末伏消暑】第六天 欢（沙塞子）