跳动文字动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color: #1d1f20;
  background-size: 100vw calc(100vh - 50px), 2px 2px;
  background-position: 0 25px, 0 0;
  background-repeat: no-repeat, repeat;
}

.scatter span {
    position: relative;
    animation: scatter 2s infinite;
}

.scatter span:nth-child(2n) {
    animation-delay: 0.3s;
}

.scatter span:nth-child(3n) {
    animation-delay: 0.15s;
}

.scatter span:nth-child(5n) {
    animation-delay: 0.4s;
}

.scatter span:nth-child(7n) {
    animation-delay: 0.25s;
}

.scatter span:nth-child(9n) {
    animation-delay: 0.15s;
}

h1 {
  letter-spacing: 1px;
  margin: 150px auto;
  margin: calc(50vh - 4rem) auto;
  text-align: center;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7rem;
  color: #FF9C55;
  text-shadow: -1px -1px #0D4E3B,
    -1px -0.75px #0D4E3B,
    -1px -0.5px #0D4E3B,
    -1px -0.25px #0D4E3B,
    -1px 0px #0D4E3B,
    1px -1px #0D4E3B,
    1px -0.75px #0D4E3B,
    1px -0.5px #0D4E3B,
    1px -0.25px #0D4E3B,
    1px 0px #0D4E3B,
    0px 1px #0D4E3B,
    -0.25px 1px #0D4E3B,
    -0.5px 1px #0D4E3B,
    -0.75px 1px #0D4E3B,
    -1px 1px #0D4E3B,
    0 0.25px #0D4E3B,
    0 0.5px #0D4E3B,
    0 0.75px #0D4E3B,
    -0.75px 0.75px #0D4E3B,
    -0.25px 0.25px #0D4E3B,
    1px 0.25px #0D4E3B,
    1px 0.5px #0D4E3B,
    1px 0.75px #0D4E3B,
    1px 1px #0D4E3B,
    0px 6px #0D4E3B,
    -1px 6px #0D4E3B, 
    -1px 5px #0D4E3B, -1px 5.75px #0D4E3B, -1px 5.5px #0D4E3B, -1px 5.25px #0D4E3B,
    -1px 4px #0D4E3B, -1px 4.75px #0D4E3B, -1px 4.5px #0D4E3B, -1px 4.25px #0D4E3B,
    -1px 3px #0D4E3B, -1px 3.75px #0D4E3B, -1px 3.5px #0D4E3B, -1px 3.25px #0D4E3B,
    -1px 2px #0D4E3B, -1px 2.75px #0D4E3B, -1px 2.5px #0D4E3B, -1px 2.25px #0D4E3B,
    -1px 1px #0D4E3B, -1px 1.75px #0D4E3B, -1px 1.5px #0D4E3B, -1px 1.25px #0D4E3B,
    1px 5px #0D4E3B, 1px 5.75px #0D4E3B, 1px 5.5px #0D4E3B, 1px 5.25px #0D4E3B,
    1px 4px #0D4E3B, 1px 4.75px #0D4E3B, 1px 4.5px #0D4E3B, 1px 4.25px #0D4E3B,
    1px 3px #0D4E3B, 1px 3.75px #0D4E3B, 1px 3.5px #0D4E3B, 1px 3.25px #0D4E3B,
    1px 2px #0D4E3B, 1px 2.75px #0D4E3B, 1px 2.5px #0D4E3B, 1px 2.25px #0D4E3B,
    1px 1px #0D4E3B, 1px 1.75px #0D4E3B, 1px 1.5px #0D4E3B, 1px 1.25px #0D4E3B;
}

h1 span:nth-child(2n) {
    color: #F47AFF;
}

h1 span:nth-child(3n) {
    color: #FFD913;
}

h1 span:nth-child(5n) {
    color: #555BFF;
}

h1 span:nth-child(7n), h1 span:nth-child(12n) {
    color: #FF5555;
}

@keyframes scatter {
    0% {
      top: 0;
    }
    50% {
      top: -10px;
    }
    100% {
      top: 0;
    }
}

@media screen and (max-width: 760px) {
  h1 {
    margin: calc(50vh - 7rem) auto;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg