js+css实现微光波浪文本动画效果代码-html代码-BFW代码库

js+css实现微光波浪文本动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现微光波浪文本动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

#animatedText {
  color: #46afc8;
  font-size: 16px;
  font-family: "Open-Sans", sans-serif;
  font-weight: 600;
}
#animatedText span {
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
  -webkit-animation: wave 2.6s ease infinite;
          animation: wave 2.6s ease infinite;
  letter-spacing: 0.01em;
  transform-origin: 0 55%;
}
#animatedText span:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#animatedText span:nth-child(2) {
  -webkit-animation-delay: 0.09s;
          animation-delay: 0.09s;
}
#animatedText span:nth-child(3) {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}
#animatedText span:nth-child(4) {
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s;
}
#animatedText span:nth-child(5) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
#animatedText span:nth-child(6) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
#animatedText span:nth-child(7) {
  -webkit-animation-delay: 0.54s;
          animation-delay: 0.54s;
}
#a.........完整代码请登录后点击上方下载按钮下载查看