龙空技术网

前端CSS实现跳动的文字

一个爬坑的Coder 238

前言:

目前看官们对“h1css”大约比较讲究,你们都想要剖析一些“h1css”的相关资讯。那么小编同时在网摘上搜集了一些有关“h1css””的相关资讯,希望兄弟们能喜欢,大家快快来了解一下吧!

效果图首选来一个简单的布局

这里就不用多说,都是简单排版

<h1>一个爬坑的Coder</h1>
html {  height: 100%;}body {  display: flex;  justify-content: center;  align-items: center;  height: 100%;}h1 {  font-size: 48px;}
每个文字独立出来

每个文字都有动画,那每个字都应该是单独,可以把每个文字单独用一个标签包裹起来,这样就可以了。但是手动操作太过于麻烦了,还得上JavaScript

const h1 = document.querySelector("h1");// $&包括替换字符串中整个匹配项的副本h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");
制作css动画
h1 span {  /* 内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */  display: inline-block;  animation: jump 500ms ease-in-out;}@keyframes jump {  0%,    100% {      transform: translateY(0);    }  50% {    transform: translateY(-10px);  }}

此时发现所有文字都是一起动画的,为了达到效果,我们需要给每个文字加上动画延迟(后面的要比前面的动画开始时间要迟一点),这样就可以一个接着一个动。

给每个文字都加上动画延迟

h1 span {  /* 内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */  display: inline-block;  animation: jump 500ms ease-in-out;  animation-delay: var(--delay);}document.querySelectorAll("span").forEach((span, index) => {  // 我们可以借助css变量,或者直接通过js给animation-delay属性设置值  span.style.setProperty("--delay", `${index * 150}ms`);});
所有代码

通过以上的步骤分析,就可以达到效果。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      html {        height: 100%;      }      body {        display: flex;        justify-content: center;        align-items: center;        height: 100%;      }      h1 {        font-size: 48px;      }      h1 span {        /* //   内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */        display: inline-block;        animation: jump 500ms ease-in-out;        animation-delay: var(--delay);      }      @keyframes jump {        0%,        100% {          transform: translateY(0);        }        50% {          transform: translateY(-10px);        }      }    </style>  </head>  <body>    <h1>一个爬坑的Coder</h1>    <script>      const h1 = document.querySelector("h1");      // 包括替换字符串中整个匹配项的副本      h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");      document.querySelectorAll("span").forEach((span, index) => {        span.style.setProperty("--delay", `${index * 150}ms`);      });    </script>  </body></html>

标签: #h1css