VUE动态雪花飘落

最新推荐文章于 2024-06-25 09:41:51 发布

IT小白加菜鸟

最新推荐文章于 2024-06-25 09:41:51 发布

阅读量2.8k

点赞数

分类专栏：前端vue代码文章标签： vue

本文链接：https://blog.csdn.net/qq_45958710/article/details/107856068

版权

本文介绍了如何使用Vue和JavaScript创建动态飘雪效果。通过CSS设置背景和定位，然后利用JavaScript绘制canvas，实现雪花的飘落动画。鼠标移动时，雪花会受到排斥，产生互动效果。

摘要由CSDN通过智能技术生成

css代码

#Snow{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(0, 191, 255,0.4);
pointer-events: none;
}

JavaScript代码

/雪花Start/
(function() {
var canvas = document.createElement(‘canvas’);
document.body.appendChild(canvas);
canvas.id=‘Snow’;
//

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
    window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;

})();

(function() {
var flakes = [],
canvas = document.getElementById(“Snow”), //画布ID，与上一步创建的画布对应
ctx = canvas.getContext(“2d”),