HTML和CSS第一天--cursor follow mouse movement

文件介绍

![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深深吸引， 也借以这个平台来和大家分享一下一些很有用的学习资源。

新加成员

本次将介绍如何在html中运用jquery实现不可思议的项目功能
jquery cdn

CDN

CDN 的英文全称是“Content Delevery Network" ， 中文为内容分发网络， 它可以解决分布共享库的问题；CDN 中的每台服务器都包含库的一份副本，这些服务器分布在世界上不同的国家和地区， 以便达到利用宽带和加快下载的目的。浏览器访问库的时候， 会使用一个公共的URL，而CDN 的底层则通过地理位置最近， 速度最快的服务器提供相应的文件， 从而解决了整个系统中的瓶颈问题。

Jquery

Jquery 是一组可以简化js程式写法的open source library, 透过selector,函数串接， 元素阵列整批处理等语言特色加上对HTML 处理中常用的event， attribute,CSS style ，元素新增/删除都提供了简便的写法， 它可以将原本要写上数百行的js程式简化到几行搞定， 因此也深受javascript开发者的欢迎。

代码区

HTML

 <div class="pointer"></div>

css

body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}
.pointer{
	width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    }

此时， 在左上方会出现一个小圆形

加下来是将小圆圈移动至屏幕正中央，我们需要

.pointer
{
	...
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

此时我们可以开始使用jquery语言进行动作设计，此功能设计将会在里面说明

  <script type="text/javascript">
        $(document).mousemove(function(e) {
            $('.pointer').css({
                left: e.pageX,
                top: e.pageY
            });
        })
    </script>

此代码块的含义在于根据我们鼠标的方位来确定这个小圆圈的方位。
因此我们最后可以用到transition来设置我们从小圆圈原先位置到鼠标位置的移动时常，简单实现形式就是从某一个点出发成任意角度放射出去的线段长度，我们设置一个在这个线段之间运动的时间，

{
...
pointer-events:none;/*no event lisener*/
transition: 0.2s;
}

此时我们的根据鼠标移动的小物体就完成啦，希望大家喜欢。