原生js和css实现文字拆分飞入动画

代码语言:html

所属分类:动画

代码描述:原生js和css实现文字拆分飞入动画

代码标签: css 实现 文字 拆分 飞入 动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
<style>
body{
  background-image:linear-gradient(#F9F2F0, #1C0E0D);
  height: 100vh;
}

.letters{
  font-family: 'Chelsea Market', cursive;
  font-size: 3rem;
  position: relative;
  top: 100px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.letters div{
  position:relative;
  left:200vh;
  letter-spacing:0.2rem;
transition: all 2s ease-in;
}

@keyframes slide{
  0%{
    left:200vh
  }
  100%{
    left:0
  }
}
</style>

</head>
<body translate=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0