使用HTML CSS和JavaScript设计一个字母悬停效果

在本文中，我们将学习如何使用简单的HTML，CSS和JavaScript实现弹跳字母悬停效果。HTML用于创建页面结构，CSS用于设置样式，JavaScript用于动画效果。

创建弹跳字母悬停效果的方法

HTML代码： 要实现动态的弹跳文本效果，首先用标签包围<h1>标题中的每个字母。通过这种字母级别的控制，结合CSS和JavaScript，可以实现引人注目的弹跳动画，非常适合在标题、横幅和其他强调文本中引起关注。
CSS代码： .bounce类选择器将“bounce”关键帧动画应用于HTML元素，特别是应用在围绕标题字母周围的元素上。具有此类的元素展示了动画行为。
JavaScript代码： 在此代码中，目标是“bouncing-letters”容器内的元素。当鼠标悬停在这些元素上时，触发bounce()函数，其中传递了悬停的元素。bounce()函数确保平滑的动画效果。它检查是否没有“bounce”类，以避免重复播放动画。如果没有，则为CSS动画添加“bounce”类。使用setTimeout()函数，在1秒后移除该类，恢复元素到原始状态。

示例： 此示例显示了上述方法的实现。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Bouncing Letter Hover Effect 
    </title> 
    <style> 
        body { 
            background-color: rgba(175, 224, 175, 255); 
        } 
  
        h1 { 
            font-family: sans-serif; 
            font-size: 110px; 
            text-align: center; 
            color: #318D45; 
            margin-top: 250px; 
        } 
  
        .bounce { 
            animation-name: bounce; 
        } 
  
        .bouncing-letters span { 
            animation-timing-function: linear; 
            animation-duration: 1s; 
            animation-iteration-count: 1; 
            display: inline-block; 
        } 
  
        .bouncing-letters span:hover { 
            color: whitesmoke; 
        } 
  
        @keyframes bounce { 
  
            20%, 
            50%, 
            80%, 
            to { 
                transform: scale(1, 1); 
            } 
  
            40% { 
                transform: scale(1.75, 0.65); 
            } 
  
            45% { 
                transform: scale(1.75, 0.65); 
            } 
  
            70% { 
                transform: scale(1.25, 0.75); 
            } 
  
            90% { 
                transform: scale(1.15, 0.85); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="bouncing-letters" 
        style="letter-spacing:0.3px;"> 
        <span>G</span> 
        <span>e</span> 
        <span>e</span> 
        <span>k</span> 
        <span>s</span> 
        <span>F</span> 
        <span>o</span> 
        <span>r</span> 
        <span>G</span> 
        <span>e</span> 
        <span>e</span> 
        <span>k</span> 
        <span>s</span> 
    </h1> 
  
    <script> 
        document.querySelectorAll(".bouncing-letters>span") 
        .forEach((element) => { 
            element.addEventListener("mouseover",  
                                     (e) => bounce(e.target)); 
        }); 
  
        function bounce(letter) { 
            if (!letter.classList.contains("bounce")) { 
                letter.classList.add("bounce"); 
                setTimeout( 
                    function () { 
                        letter.classList.remove("bounce"); 
                    }, 
                    1000 
                ); 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

使用HTML CSS和JavaScript设计一个字母悬停效果