网页点击特效:显示文字

源码分享 · 05-13 15:27

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

效果展示

在线体验

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

具体操作

将以下 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" 方法中的内容替换成其他的:
富强 民主 文明 和谐
自由 平等 公正 法治
爱国 敬业 诚信 友善

完!

特效 组件 优化 在线体验

上一篇 : CSS毛玻璃背景

下一篇 : 复制提醒和右键菜单提醒


  1. HowieHz   Lv1
    06-18 18:52 第4楼 中国上海市移动Windows 10 · Google Chrome

    233,好多网站有这个

  2. 05-14 00:01 第3楼 中国山西省移动Android · Google Chrome

    这个有点意思

  3. obaby   Lv2
    05-13 16:01 第1个脚印 中国山东省青岛市联通iPhone · Google Chrome

    这,哈哈哈。有那味了

    1. 刘郎   博主
      05-13 16:08 第2楼 中国贵州省移动iPhone · Safari
      @obaby

      就喜欢你这速度👍

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 1 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力