马黑黑 发表于 2022-8-9 07:43

雪乡记忆

<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#canvas { position: absolute; top: 0; left: 0; }
#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; }
#imgSnow, #bgSnow { display: none; }
#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="canvas"></canvas>
        <img id="imgSnow" src="https://638183.freep.cn/638183/Pic/81/xuehua.png" alt="">
        <img id="bgSnow" src="https://638183.freep.cn/638183/Pic/81/xuecun.jpg" alt="">
        <span id="disc"></span>
        <span id="tit">雪乡记忆</span>
</div>

<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1815132333.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 () {
        let ctx = canvas.getContext('2d');
        let snowArray = {}; //雪花对象
        let snowIndex = 0; //标识符
        let setting = {
                num: 100, //数量
                snowSize: 20, //大小
                startX: Math.random() * canvas.width, //起始横坐标
                startY: 0, //起始纵坐标
                vy: 0.01
        }

        canvas.width = papa.offsetWidth;
        canvas.height = papa.offsetHeight;
       
        function snow() {
                this.x = Math.random() * canvas.width; // 起始横坐标
                this.y = setting.startY; // 起始纵坐标
                this.size = setting.snowSize + Math.random() * 10 - 10; //大小
                this.vx = Math.random() * 3 - 2; //横坐标偏移量
                this.vy = Math.random() * 10; //纵坐标偏移量
                this.life = 0;
                this.maxLife = 100;
                this.id = snowIndex;
                snowArray = this; //当前信息保存至对象snowArray
                snowIndex ++;
        }

        snow.prototype.draw = function () {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += setting.vy;
                this.life ++;
                if (this.y > canvas.height * 0.9 - 20 || this.life >= this.maxLife) snowArray;
                ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
        }

        function render() {
                ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height);
                for (let j = 0; j < setting.num; j++) {
                        if (Math.random() > 0.97) new snow();
                }
                for (let j in snowArray) {
                        snowArray.draw();
                }
                requestAnimationFrame(render);
        }
        render();
})();
</script>

红影 发表于 2022-8-9 09:06

好漂亮的雪花啊，看着就清凉{:4_187:}

红影 发表于 2022-8-9 09:07

这个好像没有鼠标跟随效果，黑黑不用纠结雪花是否落在鼠标上了{:4_173:}

梦油 发表于 2022-8-9 09:43

无与伦比的一幅精美制作。！！

加林森 发表于 2022-8-9 10:39

我还 以为老黑要写什么的，就没有立即回帖的。

马黑黑 发表于 2022-8-9 12:45

加林森 发表于 2022-8-9 10:39
我还 以为老黑要写什么的，就没有立即回帖的。

没时间写

马黑黑 发表于 2022-8-9 12:46

红影 发表于 2022-8-9 09:07
这个好像没有鼠标跟随效果，黑黑不用纠结雪花是否落在鼠标上了

论坛对这方面的支持度还找不到解决方案，暂时不用那类特效

马黑黑 发表于 2022-8-9 12:47

红影 发表于 2022-8-9 09:06
好漂亮的雪花啊，看着就清凉

这个和之前的雪花飘异曲同工

马黑黑 发表于 2022-8-9 12:47

梦油 发表于 2022-8-9 09:43
无与伦比的一幅精美制作。！！

感谢支持{:4_190:}

加林森 发表于 2022-8-9 13:18

马黑黑 发表于 2022-8-9 12:45
没时间写

嗯嗯。今天又学习了一招。老黑真好。谢谢啦！

梦油 发表于 2022-8-9 15:20

马黑黑 发表于 2022-8-9 12:47
感谢支持

我的二孙子去过雪乡，他说，那里确实很美，就是太贵。我还真想去看看呢。

红影 发表于 2022-8-9 20:42

马黑黑 发表于 2022-8-9 12:46
论坛对这方面的支持度还找不到解决方案，暂时不用那类特效

嗯嗯，就这样也很好了{:4_187:}

红影 发表于 2022-8-9 20:43

马黑黑 发表于 2022-8-9 12:47
这个和之前的雪花飘异曲同工

之前的好像不是用画布做的。

马黑黑 发表于 2022-8-9 20:52

红影 发表于 2022-8-9 20:43
之前的好像不是用画布做的。

所以说异曲同工

马黑黑 发表于 2022-8-9 20:53

红影 发表于 2022-8-9 20:42
嗯嗯，就这样也很好了

将就吧

小辣椒 发表于 2022-8-9 21:50

记得，黑黑有分享过一个雪花的帖

小辣椒 发表于 2022-8-9 21:55

这个雪花的png做的真漂亮

千羽 发表于 2022-8-9 22:07

好美的雪景，飘舞的雪花不是透明flash吧？

马黑黑 发表于 2022-8-9 22:08

千羽 发表于 2022-8-9 22:07
好美的雪景，飘舞的雪花不是透明flash吧？

不是flash

马黑黑 发表于 2022-8-9 22:08

小辣椒 发表于 2022-8-9 21:55
这个雪花的png做的真漂亮

还行的
页: [1] 2 3 4
查看完整版本: 雪乡记忆