HTML和CSS 学习（3）--confetti cursor

confetti cursor

文件介绍
代码

引入相关js 文件
css文件

结语

文件介绍

![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;
}