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

原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效

 更新時(shí)間：2021年10月14日 11:53:58   作者：aiguangyuan  
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了一個(gè)鼠標(biāo)滑動撒愛心的js特效，效果如下：

以下是代碼實(shí)現(xiàn)，歡迎大家復(fù)制粘貼和收藏。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '微軟雅黑', sans-serif;
        }
 
        body {
            height: 100vh;
            background: #000;
            overflow: hidden;
        }
 
        span {
            position: absolute;
            background: url(heart.png);
            pointer-events: none;
            width: 100px;
            height: 100px;
            background-size: cover;
            transform: translate(-50%, -50%);
            animation: animate 2s linear infinite;
        }
 
        @keyframes animate {
            0% {
                transform: translate(-50%, -50%);
                opacity: 1;
                filter: hue-rotate(0deg);
            }
 
            100% {
                transform: translate(-50%, -1000%);
                opacity: 0;
                filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
 
<body>
    <script>
        document.addEventListener('mousemove', (e) => {
            let body = document.querySelector('body')
            let heart = document.createElement('span')
            let x = e.offsetX
            let y = e.offsetY
            heart.style.left = x + 'px'
            heart.style.top = y + 'px'
            let size = Math.random() * 100
            heart.style.width = size + 'px'
            heart.style.height = size + 'px'
            body.appendChild(heart)
            setTimeout(() => {
                heart.remove()
            }, 3000)
        })
    </script>
</body>
 
</html>

以下是上面代碼中引入的圖片heart.png

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

相關(guān)文章

  • 動態(tài)生成js類的實(shí)現(xiàn)方法

    動態(tài)生成js類的實(shí)現(xiàn)方法

    動態(tài)生成js類的實(shí)現(xiàn)方法...
    2007-03-03
  • JS判斷空對象的幾個(gè)方法大盤點(diǎn)

    JS判斷空對象的幾個(gè)方法大盤點(diǎn)

    在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對象是不是為空,避免當(dāng)接口異常時(shí)候前端頁面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對象的幾個(gè)方法,需要的朋友可以參考下
    2022-02-02
  • JavaScript實(shí)現(xiàn)簡單抽獎系統(tǒng)

    JavaScript實(shí)現(xiàn)簡單抽獎系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單抽獎系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)

    用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)

    用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)...
    2007-08-08
  • js密碼強(qiáng)度檢測

    js密碼強(qiáng)度檢測

    這篇文章主要介紹了js密碼強(qiáng)度檢測的相關(guān)資料，并給出了詳細(xì)代碼，需要的朋友可以參考下
    2016-01-01
  • label+input實(shí)現(xiàn)按鈕開關(guān)切換效果的實(shí)例

    label+input實(shí)現(xiàn)按鈕開關(guān)切換效果的實(shí)例

    下面小編就為大家?guī)硪黄猯abel+input實(shí)現(xiàn)按鈕開關(guān)切換效果的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08

    • 最新評論