朵拉 发表于 2024-4-25 23:06

紫荆花盛开（马黑黑原创）

本帖最后由 朵拉 于 2024-4-25 23:30 编辑 <br /><br /><style>
#mydiv { margin: 20px 0; left: calc(50% - 81px); transform: translateX(-50%); width: fit-content; height: fit-content; overflow: hidden; pointer-events: none; position: relative; }
#mydiv::after { position: absolute; content: url('https://638183.freep.cn/638183/small/f01.png'); left: 20px; top: 20px; mix-blend-mode: multiply; cursor: pointer; pointer-events: auto; animation: rot 6s linear infinite var(--state); }
#canv { positon: absolute; background: #333; border: 1px solid gray; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959528822" autoplay loop></audio>
    <canvas id="canv"></canvas>
</div>

<script>
var ctx = canv.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
    ww = canv.width = img.width;
    hh = canv.height = img.height;
    ctx.drawImage(img, 0, 0);
    reDraw(ctx, ctx.getImageData(0,0,ww,hh));
};
img.src = 'https://pic.imgdb.cn/item/662a76820ea9cb140331b12d.jpg';

var reDraw = (context, data) => {
    for(var i = 0; i < data.data.length; i += 4) {
      if(i % 60 === 0) data.data = 100;
    }
    ctx.clearRect(0, 0, ww, hh);
    context.clearRect(0,0,ww,hh);
    context.putImageData(data,0,0);
};

aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

朵拉 发表于 2024-4-25 23:31

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-4-26 08:05

朵拉 发表于 2024-4-25 23:31
@马黑黑
老师好，学生交作业，请指正哈

没能瞅见啥东东

朵拉 发表于 2024-4-26 09:14

马黑黑 发表于 2024-4-26 08:05
没能瞅见啥东东
学生是手机制作，刷新了几次才看到图片，
您电脑按 CTRL+F5或其他，刷新几次看看~~
https://pic.imgdb.cn/item/662b52410ea9cb1403b2fa96.jpg



红影 发表于 2024-4-26 15:06

漂亮。欣赏朵宝好帖{:4_187:}

愤怒的葡萄 发表于 2024-4-26 15:10

进来欣赏了，好帖。
页: [1]
查看完整版本: 紫荆花盛开（马黑黑原创）