html5动态文字特效，文字动画特效

!DOCTYPE html>
        
html lang="en" >
        
head>
        
meta charset="UTF-8">
        
title>
    html5动态文字特效，文字动画特效/title>
        
meta name="viewport" content="width=device-width, initial-scale=1">
        
meta charset="utf-8">
        
link href="https://fonts.googleapis.com/css2?family=Archivo+Black&
    display=swap" rel="stylesheet">
    
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
        
style>

body {
    
  font-family: "Archivo Black", sans-serif;
    
  background: #f4d03f;
    
  display: flex;
    
  flex-direction: column;
    
  height: 100vh;
    
  justify-content: center;
    
  align-items: center;

}


.words {
    
  color: #f4d03f;
    
  font-size: 0;
    
  line-height: 1.5;

}


.words span {
    
  font-size: 5rem;
    
  display: inline-block;
    
  animation: move 3s ease-in-out infinite;

}


@keyframes move {

  0% {
    
    transform: translate(-30%, 0);

  }

  50% {
    
    text-shadow: 0 25px 50px rgba(0, 0, 0, 0.75);

  }

  100% {
    
    transform: translate(30%, 0);

  }

}


.words span:nth-child(2) {
    
  animation-delay: 0.5s;

}


.words span:nth-child(3) {
    
  animation-delay: 1s;

}


.words span:nth-child(4) {
    
  animation-delay: 1.5s;

}


.words span:nth-child(5) {
    
  animation-delay: 2s;

}


.words span:nth-child(6) {
    
  animation-delay: 2.5s;

}


.words span:nth-child(7) {
    
  animation-delay: 3s;

}
    
/style>
    
/head>
        
body>
        
!-- partial:index.partial.html -->
        
div class="words word-1">
        
span>
    L/span>
        
span>
    z/span>
        
span>
    x/span>
        
span>
    B/span>
        
span>
    l/span>
        
span>
    o/span>
        
span>
    g/span>
        
/div>
        
div class="words word-2">
        
span>
    I/span>
        
span>
    S/span>
        
/div>
        
div class="words word-3">
        
span>
    C/span>
        
span>
    O/span>
        
span>
    O/span>
        
span>
    L/span>
        
/div>
        
!-- partial -->
        
/body>
        
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！