如何做動畫下劃線懸停效果？

-1

任何人都可以幫助我解決這個很酷的動畫下劃線懸停效果是如何在site上完成的？我試圖自己複製它，但沒有成功。這裏是我的jsbin 如何做動畫下劃線懸停效果？

2016-10-22 ScreamQueen

需要編寫的CSS和動畫功能，你在這裏你可以參考我的代碼

a{ 
 
    text-decoration:none; 
 
} 
 
a:hover { 
 
    border-bottom: 1px solid; 
 
    -webkit-animation: border-hover .6s infinite ease-in-out !important; 
 
    animation: border-hover .6s infinite ease-in-out !important 
 
} 
 

 
@-webkit-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@-moz-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@-o-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
}

<a href="#" class"link">Link goes here</a>

來源

2016-10-22 15:06:19 Jazzzzz

這可以通過過渡完成和邊界屬性應用到您的容器

當你將鼠標懸停在href你看到的片斷如下

body{ 
 
    background:black; 
 
    color:orange; 
 
} 
 
#somethin{ 
 
    display:inline-block; 
 
    border-bottom:solid transparent 5px; 
 
    transition:all 1s; 
 
} 
 
#somethin:hover{ 
 
    cursor:pointer; 
 
    border-bottom:solid red 5px; 
 
    
 
}

<div id="somethin"> 
 
Infinite Loop 
 
</div>

來源

2016-10-22 14:56:37 repzero

由於CSS3文本的裝修風格不工作的支持，我用邊框底部，這裏是一個示例代碼：

<!html> 
<html> 
<head> 
    <style> 
     @keyframes cool-effect { 
      from { 
       border-bottom-style: solid; 
      } 
      50% { 
       border-bottom-style: dotted; 
      } 
      to { 
       border-bottom-style: dashed; 
      } 
     } 

     .fancy { 
      width : 300px; 
      border-bottom : 2px solid #000; 
     } 
     .fancy:hover { 
      -webkit-animation: cool-effect 1s infinite; 
      -o-animation:cool-effect 1s infinite; 
      animation: cool-effect 1s infinite; 
     } 
    </style> 
</head> 
<body> 
    <h2 class="fancy">Underline awesome effect !</h2> 
</body> 
</html>

來源

2016-10-22 15:10:42

如何做動畫下劃線懸停效果？

回答

相關問題