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

【末伏消暑】第六天欢《莫名我就喜欢你》

本帖最后由 醉美水芙蓉 于 2022-8-20 21:04 编辑 <br /><br /><style>
#papa {left: -180px;top:120px; width: 960px; height: 540px; background: #eee url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/671b7907964d2da719676d0bc0fcaa5e_preview.jpg') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; right:10px;top:280px; }
#disc { position: absolute; width: 40px; height: 40px; left: 20px; top: 60px; 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; top: 60px;font: bold 22px / 40px sans-serif; color: #5BDAFA; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div style="position: absolute; right:20px; top: 0px; width:180px;">
                <img alt="" src=""/>
                </div>
<div style="position: absolute; left:80px; bottom: 0px; width:185px;">
                <img alt="" src="https://pic.imgdb.cn/item/62fef60216f2c2beb1d7eeed.png"/>
                </div>
      <canvas id="canv" width="400" height="380"></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 = 40, charIdx = 0;


(function drawText() {
      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle ='#5BDAFA';
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 2;
      ctx.shadowBlur = 4;
      ctx.shadowColor = '#0022AA';
      ctx.font = 'bold 26px snas-serif';
      for(let k = 0; k < lineNow; k ++) {
                ctx.fillText(txtAr, 20, 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://www.qqmc.com/up/kwlink.php?id=81705837&.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:58

水芙蓉的这个逐字输入也是可以停留的呢，真棒{:4_187:}

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

画面很漂亮，不过美人头上的植物没什么必要，可以考虑换个蝴蝶什么的{:4_173:}

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

红影 发表于 2022-8-20 20:58
水芙蓉的这个逐字输入也是可以停留的呢，真棒

跟你学习玩得呢！

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

画面精美！

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

樵歌 发表于 2022-8-20 21:04
画面精美！

樵歌晚上好！欢迎光临！

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

不错的制作。赞。

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

马黑黑 发表于 2022-8-20 21:09
不错的制作。赞。

是黑黑老师的代码厉害！

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

醉美水芙蓉 发表于 2022-8-20 21:06
樵歌晚上好！欢迎光临！

美女晚上好{:4_190:}

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

醉美水芙蓉 发表于 2022-8-20 21:51
是黑黑老师的代码厉害！

代码重组也是个技术活

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

水芙蓉这个套用玩的也是特别美{:4_178:}

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

醉美水芙蓉 发表于 2022-8-20 21:04
跟你学习玩得呢！

没事啊，我也是用的黑黑的代码呢{:4_173:}

加林森 发表于 2022-8-20 23:45

漂亮的制作。赞！

青青子衿 发表于 2022-8-20 23:59

黄玫瑰，所有的花，你最美。。。。就这样莫名喜欢你。。。。。欣赏芙蓉美女作品

醉美水芙蓉 发表于 2022-8-21 08:34

加林森 发表于 2022-8-20 23:45
漂亮的制作。赞！

谢谢队长欣赏支持！

醉美水芙蓉 发表于 2022-8-21 08:35

青青子衿 发表于 2022-8-20 23:59
黄玫瑰，所有的花，你最美。。。。就这样莫名喜欢你。。。。。欣赏芙蓉美女作品

谢谢朋友欣赏支持！

醉美水芙蓉 发表于 2022-8-21 08:37

小辣椒 发表于 2022-8-20 22:01
水芙蓉这个套用玩的也是特别美

小辣椒见笑了！我只是觉得这个代码特别好玩，跟着红影美女学着玩了一个！

加林森 发表于 2022-8-21 08:39

醉美水芙蓉 发表于 2022-8-21 08:34
谢谢队长欣赏支持！

早晨好！{:4_190:}
页: [1]
查看完整版本: 【末伏消暑】第六天欢《莫名我就喜欢你》