朵拉 发表于 2022-8-10 22:01

红颜如霜（马黑黑原创）

本帖最后由 朵拉 于 2022-8-10 22:07 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; width: 100%; height: 100%; background: #000; }
#bgImg { display: none; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; 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; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <img id="bgImg" src="https://pic.imgdb.cn/item/62f3b80d16f2c2beb15af956.jpg
" alt="" />
      <span id="disc"></span>
      <span id="tit">红颜如霜 | 周杰伦</span>
</div>

<script>
let ctx = canv.getContext('2d');
let w = papa.clientWidth, h = papa.clientHeight, aud = new Audio();
let dotAr = Array.from({length: 200}, (item,key) => { return { x: Math.random()*w, y: Math.random()*h, r: Math.random()*5, }; });

canv.width = w;
canv.height = h;
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/08/09/2cab6e79f9478f16976bbc0f8d697ad5.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');

function draw() {
      ctx.clearRect(0,0,w,h);
      ctx.drawImage(bgImg, 0, 0, w, h);
      ctx.beginPath();
      for(item of dotAr) {
                ctx.fillStyle = 'rgba(255,255,255,.35)';
                ctx.moveTo(item.x, item.y);
                ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
      }
      ctx.fill();
      update();
}

function update() {
      for (key in dotAr) {
                dotAr.y -= (7 - dotAr.r) / 10;
                if(dotAr.y < 0) {
                        dotAr = {
                              x: Math.random() * w,
                              y: h,
                              r: Math.random()*5,
                        }
                }
      }
}

draw();
setInterval(draw,10);
</script>

朵拉 发表于 2022-8-10 22:02

@马黑黑
马老师，请教 图片的位置怎么调整{:4_190:}

马黑黑 发表于 2022-8-10 22:05

朵拉 发表于 2022-8-10 22:02
@马黑黑
马老师，请教 图片的位置怎么调整

CSS 代码中，

#papa { margin: auto;... }

红色代码部分是本地测试居中用的，论坛上，你要改为，

#papa { left: -214px; ... }

也就是左移 214 个像素。至于移动多少，还要看帖子外框的尺寸，1024px的话就是 left: -214; 即可

朵拉 发表于 2022-8-10 22:08

马黑黑 发表于 2022-8-10 22:05
CSS 代码中，

#papa { margin: auto;... }


谢谢马老师，位置已调整好{:4_190:}

马黑黑 发表于 2022-8-10 23:16

周董挺帅气的

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

这个制作真漂亮，朵宝真棒{:4_187:}

加林森 发表于 2022-8-11 00:06

朵拉制作得真漂亮。

青青子衿 发表于 2022-8-11 00:08

漂亮。。。。问好才女友友~！

醉美水芙蓉 发表于 2022-8-27 23:06

加林森 发表于 2022-8-27 23:08

{:4_174:}
页: [1]
查看完整版本: 红颜如霜（马黑黑原创）