前言:
目前看官们对“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