HTML和CSS 学习（3）--confetti cursor_css confetti-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42919657/article/details/103935433

本文介绍了如何利用HTML、CSS和JavaScript从在线教程资源中创建一个跟随鼠标移动的confetto效果的cursor。通过引入相关JS和CSS文件，并在HTML中添加必要的代码，读者可以实现一个有趣的交互式网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

confetti cursor

文件介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引，也借以这个平台来和大家分享一下一些很有用的学习资源。**

代码

引入相关js 文件

在这里插入图片描述
点击这里进入网站

点击"download" 按钮进行下载，将里面的css和比较大一点的js文件复制粘贴至当前文件夹。

通过此页面下方的使用方法，将想应的代码复制至html文件中：
分别是：
在中加入：

<link href="jquery.vnm.confettiButton.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

在中加入：

<body>
    <div class="cursor"></div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="jquery.vnm.confettiButton.js"></script>
    <script type="text/javascript">
        $(function() {

            $('.cursor').confettiButton();

        });
        $(document).mousemove(function(e) {
            $('.cursor').css({
                left: e.pageX,
                top: e.pageY,
            })
        })
    </script>
</body>

第一个jquery 文件通过google搜索jquery cdn，将链接更换即可

css文件

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/*初始化固定形态为居中状态*/
.cursor {
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);/*网左上角移动一个单元*/
    transition: 0.2s;
}
/*调整 confetto的大小*/
.confetto {
    width: 10px !important;
    height: 10px !important;
}