纯css 实现⽂字跳动的动画效果
以下图⽚为截图所得，所以为静态展⽰具体实现的详细代码如下，可直接cv复⽤：html部分代码：
css部分代码：<h1 class="my-words">  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span>  </span><span>w</span><span>o</span><span>r</span><span>l</span><span>d</span>  </h1>
1
2
3
4body {    background-color: skyblue;  }  .my-words span {    position: relative;    animation: my-words 2s infinite;  }  .my-words span:nth-child(2n) {    animation-delay: 0.3s;  }  .my-words span:nth-child(3n) {    animation-delay: 0.15s;  }  .my-words span:nth-child(5n) {    animation-delay: 0.4s;  }  .my-words span:nth-child(7n) {    animation-delay: 0.25s;  }  .my-words span:nth-child(9n) {    animation-delay: 0.15s;  }  h1 {    letter-spacing: 1px;    margin: 150px auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
css特效文字
30
31
32
33
margin: 150px auto;    text-align: center;    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, -1
px 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 my-words {    0% {    top: 0;    }333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
以上代码仅为⽰例，可根据⾃⼰需求进⾏适当的修改    }    50% {    top: -10px;    }    100% {    top: 0;    }  }
9899100101102103104105106107

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。