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