网页点击特效：显示社会主义核心价值观

这需要用到一段CSS和JS。

.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);    
    }
}

插入上方CSS后再在网页任意处添加以下JavaScript代码，记得包含在<Script>标签里面。

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(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);

完成后效果如下图所示，点击页面任意处会显示24字社会主义核心价值观。

冇情提示

在写代码的同时别忘了背诵24字、城市宣传标语、八礼四仪等内容，最近文明城市又来检查抽背啦~

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