Html文字冒泡的例子

Html文字冒泡🌰

效果：

原理：鼠标单击时，创建一个元素，添加到body中；设置过渡属性，变为透明后删除这个元素。

定义CSS过渡属性

.bubble {
    font-size: 20px;
    position: absolute;
    user-select: none;
    opacity: 1;
    transition: opacity 1s ease, transform 0.5s ease;
    transform: translateY(0);
}

.bubble.fade-out {
    opacity: 0;
    transform: translateY(-50px);
}

定义弹出的文字、颜色和文字索引

var bubble_words = ["李", "晨", "曦"]
var bubble_colors = ["#3DCC8E", "#1DC481", "#85DB57", "#9CDB3D", "#C7DB43"]
var bubble_index = 0

咱们这个效果是点哪里都会触发的，所以需要一个全局的点击事件监听器，就是直接给document注册监听。

document.addEventListener("click", function (x) {  
  })

接着我们需要创建一个span标签的节点，并设置相应属性，最后把这个节点添加到body中去

e.clientX获取的是横坐标上鼠标点击位置

var bubble = document.createElement("span")
bubble.setAttribute("class", "bubble")
bubble.style.color = bubble_colors[Math.floor(Math.random() * bubble_colors.length)]
bubble.style.left = e.clientX - 10 + "px"
bubble.style.top = e.clientY - 25 + "px"
bubble.innerHTML = bubble_words[bubble_index]

document.body.appendChild(bubble)

设置延时器，100毫秒后添加淡出类名，开始执行过渡属性，并添加监听，过渡属性执行完毕后删除该元素

setTimeout(function () {
    bubble.classList.add("fade-out")

    bubble.addEventListener("transitionend", function (event) {
        document.body.removeChild(bubble)
    })
}, 100)

最后更新弹出文字的索引

bubble_index = (bubble_index + 1) % bubble_words.length