当鼠标悬停在 hover 上时显示 Css animation

Question

我想展示 animation 绘制一条有角度的直线，并在将鼠标悬停在按钮上时从左到右显示我的文本，我在这方面相当陌生。 在 animation 完成后，还有什么方法可以让我的文本保留下来，而不是 go 离开？

这是我的代码，该代码是堆栈溢出的其他答案的组合。

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

Answer 1

您需要在具有 Javascript 的div.skew元素上添加/切换 class，并在该 class 或具有该 class 的元素的子元素上定义animation规则，如下所示：

 var button = document.querySelector("button.menubtn"); //Select the button var skewElement = document.querySelector("div.skew"); //Select the 'skew' element button.onmouseover = function(){ skewElement.classList.toggle("startAnimation"); }

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); }.skew.startAnimation { animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); }.startAnimation.line { animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { opacity: 0; position: relative; top: -17px; left: 15px; }.startAnimation.showText { animation: showText 2s; animation-fill-mode: forwards; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

为了即使在动画结束后也能看到文本，您必须在.showText上指定animation-fill-mode: forwards ，就像我在上面的代码片段中所做的那样。

Answer 2

要在悬停时完成 animation，首先我们必须使用 javascript 创建一个用于悬停该特定元素的事件

然后在触发该事件时调用 function，它会为您显示一些动画

为简单起见，我只是为您的整个 animation 元素制作了一个父 div，并且最初没有显示

稍后悬停时，我们将该父元素的 css 显示属性更改为block ，这将显示所有动画元素

还要确保您的文本保留在 animation 之后，有一个名为forwards的 animation 属性，它将在以后保留您的最终 animation state

 var hvrbtn=document.getElementById("hvrbtn"); hvrbtn.onmouseover=()=>{ var anim=document.getElementById("anim"); anim.style.display="block"; };

 .animated{ display:none; }.skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s forwards; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn" id="hvrbtn">hover over me</button> </div> <div class="animated" id="anim"> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div> <div>