CSS 3.0文字悬停跳动特效代码

给大家分享一个用CSS 3.0实现的文字悬停跳动特效，效果如下： 

 以下是代码实现，欢迎大家复制粘贴和收藏。

 
    
 
 
 
 
     * {
  margin: 0;
  padding: 0;
     }
     body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
     }
 
     .loader {
  position: relative;
     }
 
     .loader span {
  position: relative;
  font-size: 2em;
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
  animation-play-state: paused;
     }
 
     .loader:hover span {
  animation-play-state: running;
     }
     @keyframes animate {
 
  0%,
  40%,
  100% {
      transform: translateY(0);
  }
 
  20% {
      transform: translateY(-50px);
  }
     }
 
    
 
    
 
     A
     n
     i
     m
     a
     t
     i
     o
     n
     _
     P
     l
     a
     y
     _
     S
     t
     a
     t
     e
     .
 
    
 

总结

到此这篇关于CSS 3.0文字悬停跳动特效代码的文章就介绍到这了,更多相关CSS 3.0文字悬停跳动内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！