丝滑的标题动画（js小练习）

最新推荐文章于 2024-10-02 05:39:15 发布

positive546

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量433

点赞数 4

分类专栏： JavaScript 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/2203_75455572/article/details/142107745

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .title{
        
        font-size:42px;
        text-transform: uppercase;
        letter-spacing: 5px;
        transform: rotate(-10deg);
        display: flex;
        margin: 5px;  /* 移除上下间距 */
        padding: 0;  /* 移除内边距 */
        
    justify-content: center;  /* 水平居中 */
   
    }
    @keyframes jump{
        from{
            transform: skew(-10deg) translateY(300%);
            opacity: 0;
        }
        to{
            transform: skew(-10deg) translateY(0);
            opacity: 1;
        }
    }
.title span{
    opacity: 0;
   /* transform: rotate(-10deg); 
     会将元素绕其中心旋转 -10 度，
    而 transform: skew(-10deg); 会将元素沿 X 轴倾斜 -10 度。旋转改变元素的方向，而倾斜则改变其形状，使元素看起来像是被倾斜的。    */
   transform: skew(-10deg);
 text-shadow: 1px 1px #533d4a ,2px 2px #533d4a,3px 3px #533d4a,4px 4px #533d4a,5px 5px #533d4a;
 animation: jump 1s cubic-bezier(0.55, 0.01, 0.68, 1.46) 
 forwards var(--delay);
}
.title:nth-child(1){
    color: #e55643;
}
.title:nth-child(2){
    color: #2b9f5e;
}
.title:nth-child(3){
    color: #f1c83c;
}
</style>
<body>
    
    <div>
        <p class="title">这是一段</p>
        <p class="title">长长的</p>
        <p class="title">标题文字</p>
    </div>

    <script>
        const ps=document.querySelectorAll('.title')
        ps.forEach((p)=>{
            const result=p.textContent
            .split('')
            .map((c) => `<span>${c}</span>`)
            .join('')
          p.innerHTML=result;
        });
          const spans=document.querySelectorAll('.title span')

          for(let i=0;i<spans.length;i++)
          {
            spans[i].style.setProperty('--delay',`${i*0.1}s`)
          }
       

       
    </script>
</body>
</html>

二.小记

1.处理数组

首先通过标签获取所有的p元素，然后循环它们，每次循环都可以拿到p元素的内容

基于这个内容用split方法把它们进行分割，分割成一个个的文字

然后利用map方法处理这个数组并返回一个新数组，即对每个文字添加span标签将其包裹

再用join方法把数组拼接起来

最后把result结果给每个p元素

2.设置文字阴影立体效果

设置多个阴影，一点一点加上去即可(1px,2px,3px...)

text-shadow: 1px 1px #533d4a ,2px 2px #533d4a,3px 3px #533d4a,4px 4px #533d4a,5px 5px #533d4a;

3.倾斜效果

.title{
transform: rotate(-10deg); 
}
  //p元素旋转，但是文字也跟着旋转
我们需要将文字旋转回来
为其设置以下：

.title span{
transform: skew(-10deg);
}

但你设置过程可能会发现没作用

原因是要想这个设置生效必须要求这个元素生成的盒子是一个块盒，行盒不行

因此要把span元素变成块盒:

把父元素变成弹性盒（flex），子元素自动变块盒

.title{

display: flex;
}

注：rotate和skew的区别

/* transform: rotate(-10deg);

会将元素绕其中心旋转 -10 度，

而 transform: skew(-10deg); 会将元素沿 X 轴倾斜 -10 度。旋转改变元素的方向，而倾斜则改变其形状

4.动画

注意点：

1.全程文字都要有skew:-10deg保持水平效果

2.弹跳效果实现：

设置波塞尔曲线，上面超出，下面低于

3.延时展示：在动画中定义自定义属性：var(--delay)

-- 前缀用于定义和使用自定义属性（也称为 CSS 变量）

 const spans=document.querySelectorAll('.title span')

          for(let i=0;i<spans.length;i++)
          {
            spans[i].style.setProperty('--delay',`${i*0.1}s`)
          }

//setProperty 是 JavaScript 中 CSSStyleDeclaration 对象的方法，用于动态地设置或修改元素的 CSS 样式属性

小细节：

.title span{
    opacity: 0;
}

//延时过程中后面的文字会展示出来，因此所有文字一开始全设置透明，依次展示

positive546

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录