CSS tips

Time:2021-7-24

CSS tips

Knowledge point 1: Transform: translate (- 50%, – 50%) scale (1.5)

In the state of position: fixed, set the transform to – 50% horizontally and vertically, and both top and left are 0
Scale (1.5) is the current box from 1 to 1.5. It is used for special effects

Knowledge point 2: pointer events: None

To solve the relationship between layers, frankly speaking, if you choose his div, it will become “something you can only see but can’t use”
Because getting the current div will always follow you! The button you clicked is invalid! Because it’s blocked by your current round box! As long as you use pointer events: None
Then the circle becomes a decoration! If you don’t believe it, click the dry me button below

Knowledge point 3: addeventlistener

The multifunctional one is onclick and onMouseMove in EC5! With him, you can write click, MouseMove, etc
And there are deletion events, such as the current round circle is too eye-catching! Then make a button

function oooooo(){
    Original circular function
 }
 xxx.removeEventListener("click", oooooo)

Knowledge point 4 P: hover ~. B

What does this mean
When p is passed! Trigger if there’s a B behind your ass!
You don’t consider B whether to use it or not!
Just remember that this B must be triggered behind P’s ass!

CSS tips

Knowledge point 5: a.style.csstext

A is the same as B
a.style.cssText = b.style.cssText = “left:” + e.clientX + “px;top:” + e.clientY + “px”

It means left: XXXX in {} of a’s style! The E in it is to obtain the relevant parameters of the current process! We chose e.clientx and y

<p class="box">
60000 words are omitted here
</p>
<div class="a"></div>
<div class="b"></div>
<button id="xx"> 
   Fuck me 
</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 ("successful at this time")
})
</script>