网页点击特效：显示文字

网页设计早已不再仅仅是功能的堆砌，更是吸引用户眼球的艺术。今天给大家分享一个别开生面的点击特效：点击网页显示文字。一段简单的代码就可以在网页上实现该效果，为你的网站增添独特魅力。

效果展示

在线体验

进入"在线体验"，点击屏幕即可看到效果！

具体操作

将以下 CSS 代码和 JS 代码添加到你需要展示该效果的地方即可：

1.CSS代码

.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}

2.JS代码

var fnTextPopup = function (arr, options) {
                    // arr参数是必须的
                    if (!arr || !arr.length) {
                        return;    
                    }
                    // 主逻辑
                    var index = 0;
                    document.documentElement.addEventListener('click', function (event) {
                        var x = event.pageX, y = event.pageY;
                        var eleText = document.createElement('span');
                        eleText.className = 'text-popup';
                        this.appendChild(eleText);
                        if (arr[index]) {
                            eleText.innerHTML = arr[index];
                        } else {
                            index = 0;
                            eleText.innerHTML = arr[0];
                        }
                        // 动画结束后删除自己
                        eleText.addEventListener('animationend', function () {
                            eleText.parentNode.removeChild(eleText);
                        });
                        // 位置
                        eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
                        eleText.style.top = (y - eleText.clientHeight) + 'px';
                        // index递增
                        index++;
                    });    
                };

fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);

当然了，你也可以将 "fnTextPopup" 方法中的内容替换成其他的：

富强 民主 文明 和谐
自由 平等 公正 法治
爱国 敬业 诚信 友善

完！