关于css: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>