前言

相信很多人都知道这个效果吧，效果看起来很独特，不同于其他的点击特效。这个效果在一些网站很常见，并且好多网站都有这个代码.

截图

教程

把下面的代码放到你网站的<body></body>里面就行了

<script> 
    !function() {
    var coreSocialistValues = ["梦境学习站", "梦境学习站", "666"],
        index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener('click', function(e) {
        if (e.target.tagName == 'A') {
            return;
        }
        var x = e.pageX,
            y = e.pageY,
            span = document.createElement('span');
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
        document.body.appendChild(span);
        animate(span);
    });
 
    function animate(el) {
        var i = 0,
            top = parseInt(el.style.top),
            id = setInterval(frame, 16.7);
 
        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + 'px';
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
    }()
 </script>

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：梦境学习站
2、本站永久网址：https://blog.godgy.xyz
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ361080778进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

网页代码
# 网页代码 # JS代码

网站添加点击出现文字动画效果

前言

截图

教程

感谢您的来访，获取更多精彩文章请收藏本站。

天气预报