css+js实现点击特效效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了css+js实现点击特效效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

话不多说，先上效果图

css+js实现点击特效效果,css动画,css,javascript,前端

实现代码：文章来源地址https://www.toymoban.com/news/detail-579074.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        height: 100vh;
        width: 100%;
    }
    img {
        width: 40px;
        height: 40px;
        animation: moy 1.2s infinite; 
        position: fixed;
    }
    @keyframes moy {
        0%{
            opacity: 1;
        }
        50%{
            opacity: .5;
            transform: translateY(-30px)
        }
        100% {
            opacity: 0;
        }
    }
</style>

<body>
    请点击屏幕触发效果
    <!-- <img src="./icon/008_鲜花绿植.png" alt=""> -->
</body>
<script>
    const bodyClick = document.querySelector('body') // 获取body节点
    const list = ['./icon/008_鲜花绿植.png', './icon/008_雪糕冰棒.png', './icon/008_啤酒精酿.png', './icon/008_奶油蛋糕.png']
    bodyClick.addEventListener('click', function(event) {
        const img = document.createElement('img') // 创建img节点
        img.src = list[Math.round(Math.random()*3)] // 定义创建img节点的src地址（Math.round(Math.random()*3)）为随机获取数值
        img.style.left = event.clientX - 19 + 'px' // 定义固定定位位置
        img.style.top =  event.clientY - 19 + 'px'
        document.body.appendChild(img) // 将创建的img节点放入body里面
        setTimeout(() => {
            img.remove() // 1秒后删除该节点
        },1000)
    })
</script>

</html>

到了这里，关于css+js实现点击特效效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！