您现在的位置是:首页 > IT行业 > html+js网站首页html+jsCSS制作波浪文本动画特效

CSS制作波浪文本动画特效

  • 蓝天
  • html+js
  • 2020-03-24 10:13:57
简介HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="./style.css" rel="stylesheet">
  <title>CSS 波浪文本动画特效</title>
  <link>
</head>
<body>
  <!-- 关注公众号《CSS特效世界》定期分享CSS特效 -->
  <div class="wavy">
    
    <span style="--i:1">内</span>
    <span style="--i:2">容</span>
    <span style="--i:3">加</span>
    <span style="--i:4">载</span>
    <span style="--i:5">中</span>
    <span style="--i:6">.</span>
    <span style="--i:7">.</span>
    <span style="--i:8">.</span>
  </div>
</body>
</html>
CSS部分
*{
  margin: 0;
  padding: 0;
  font-family: "微软雅黑"
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #000;
}

.wavy{
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
}

.wavy span{
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 2em;
  animation: animate 1s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i))
}

@keyframes animate{
  0%{
    transform: translateY(0px)
  }
  20%{
    transform: translateY(-24px)
  }
  40%, 100%{
    transform: translateY(0px)
  }
}
本文来源于:前端小珍

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式