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>