欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效

 更新時(shí)間：2021年09月16日 10:04:29   作者：那年風(fēng)吹雪正  
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

鼠標(biāo)特效需要使用定時(shí)器setTimeout在固定時(shí)間生成節(jié)點(diǎn)，刪除節(jié)點(diǎn)，生成的節(jié)點(diǎn)賦予隨機(jī)的寬高，隨機(jī)顏色，使每個(gè)特效節(jié)點(diǎn)都看起來(lái)不一樣

注意：生成的節(jié)點(diǎn)需要設(shè)置絕對(duì)定位，使其脫離文檔流，不影響頁(yè)面中其他元素的位置

代碼示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠標(biāo)特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #9df;
            overflow: hidden;
            height: 100vh;
        }
        
        span {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            box-shadow: 10px 10px 30px #45f, -10px -10px 30px #d80;
            animation: box 5s linear infinite;
            z-index: 3;
        }
        
        @keyframes box {
            0% {
                transform: translate(-50%, -50%);
                opacity: 1;
                filter: hue-rotate(0deg);
            }
            100% {
                transform: translate(-50%, -1000%);
                opacity: 1;
                filter: hue-rotate(720deg);
            }
        }
    </style>
</head>
 
<body>
 
</body>
 
</html>
<script>
    document.addEventListener("mousemove", function(e) {
        var body = document.querySelector("body");
        var span = document.createElement("span");
        var x = e.offsetX
        var y = e.offsetY
        span.style.left = x + "px"
        span.style.top = y + "px";
 
        console.log(x + ">>>" + y)
        var a = Math.random() * 30;
        span.style.width = 30 + a + "px";
        span.style.height = 30 + a + "px";
        body.appendChild(span);
        setTimeout(function() {
            span.remove();
            // console.log("ok")
        }, 4500)
    })
</script>

運(yùn)行結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論