孙振超's Show

偶然间在朋友的博客看到这个特效觉得挺好玩，然后就用豆包复刻了这个特效代码。

样式表中添加下面的样式：

/* 鼠标点击时随机出现的文字样式 */
        .word {
            position: absolute;
            pointer-events: none;
            user-select: none;
            font-size: 18px;
            color: #FF5733;
            animation: fadeOut 1s ease-out forwards;
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

在页面代码尾部添加JS代码：

<!--点击鼠标随机出现文字-->
    <script>
        const words = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
        document.addEventListener('click', function (event) {
            const randomWord = words[Math.floor(Math.random() * words.length)];
            const wordElement = document.createElement('span');
            wordElement.className = 'word';
            wordElement.textContent = randomWord;
            wordElement.style.left = event.pageX + 'px';
            wordElement.style.top = event.pageY + 'px';
            document.body.appendChild(wordElement);

            setTimeout(() => {
                wordElement.remove();
            }, 1000);
        });
    </script>