css的小知识点

知识点1：transform: translate(-50%, -50%)

在position: fixed的状态下将transform横竖调成-50%，以后用它弄成鼠标的精准度。top和left都为0

知识点2：pointer-events: none

解决层数关系，说白了选择他的div都将成为 “只能看不能用的东西”
由于获取当前的div都会时时跟着你！你本来点击的按钮点下去是无效的！由于被你当前圆形的盒子挡住了！只要你用了pointer-events: none
那么这个圆形就成了摆设！不信你就点击下方的 干死我 这个按钮

知识点3：addEventListener

多功能的一个，在ec5里都是onclick，onmousemove！有他你就能直接写click，mousemove等
并且还有删除事件，好比如今的圆形圈太碍眼！那么就作一个按钮

function oooooo(){
    本来的圆形函数
 }
 xxx.removeEventListener("click", oooooo)

知识点4：a.style.cssText

a 和b同样
a.style.cssText = b.style.cssText = "left:" + e.clientX + "px;top:" + e.clientY + "px"

意思是a的style的 {} 里装 left：xxxx! 里面的e就是获取当前通过的相关参数！咱们选择了e.clientX和Y

<p class="box">
此处省略6万字
</p>
<div class="a"></div>
<div class="b"></div>
<button id="xx"> 
   干死我 
</button>

<style>
body {
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596380156120&di=c9f3e71c29a91d37ddf77038a1812357&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56f62bab021a8.jpg') no-repeat;
    background-size: cover;}

    #xx {
                margin: auto;
                display: block;
                padding: 10px 64px;
                background: none;
                border: 1px solid #fff;
                color: #fff;
        }

    .box {
                line-height: 1.7;
                color: #fff;
                margin-top: 280px;
                padding: 10px 250px;
                text-align: center;
         }

    .a {
                width: 50px;
                height: 50px;
                background: none;
                border-radius: 100px;
                border: 1px solid #fff;
                position: fixed;
                top: 0;
                left: 0;
                transform: translate(-50%, -50%);
                transition: 0.1s all;
                pointer-events: none;
        }

    .b {
                width: 8px;
                height: 8px;
                background: none;
                border-radius: 100px;
                border: 1px solid #fff;
                position: fixed;
                top: 0;
                left: 0;
                transform: translate(-50%, -50%);
                transition: 0.15s all;
                pointer-events: none;
        }

    p:hover~.a {
                background: rgba(255, 255, 255, 0.22);
                border: none;
        }
            
    p:hover~.b {
                opacity: 0;
    }
</style>

<script>
var a = document.querySelector('.a');
var b = document.querySelector('.b');

document.addEventListener('mousemove', function(e){
    a.style.cssText = b.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`
})


document.getElementById("xx").addEventListener('click', function(){
    alert("此时成功")
})
</script>