css+div实现文字字母排列依次倾斜倒掉loading动画效果代码

代码语言:html

所属分类:动画

代码描述:css+div实现文字字母排列依次倾斜倒掉loading动画效果代码

代码标签: css div 文字 字母 排列 依次 倾斜 倒掉 loading 动画

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

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

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

  
  
<style>
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Modak", cursive;
  overflow: hidden;
}

h1 {
  text-align: center;
  font-size: clamp(3.125rem, -3.125rem + 25vw, 15.625rem);
  letter-spacing: -0.13em;
}
h1 span {
  color: #0390f6;
  text-shadow: 4px 4px 0px #82f2f2, 8px 8px 0px #6d63fd;
  animation: knock 3s infinite;
  position: relative;
  display: inline-block;
}
h1 span:nth-of-type(2) {
  animation-delay: 0.25s;
}
h1 span:nth-of-type(3) {
  animation-delay: 0.45s;
}
h1 span:nth-of-type(4) {
  animation-delay: 0.65s;
}
h1 sp.........完整代码请登录后点击上方下载按钮下载查看

网友评论0