重新创建Netlify的主页上的重新效果。-DEV365 开发者社区

这只是一种方式，也许是最好的方法，也不是Netlify的方法。有很多关于可访问性的事情。这是代码笔链接，在本文中，我将尝试引导您浏览此recreation。

重新创建此效果

让我们解剖这个动画，我们有3个不同的部分，我们可以看到

成长动画（梯度下划线也随着DIV增长）
电梯跳动动画
收缩
背景渐变舞。让我们从可以说的主要动画开始。

电梯飞机动画

列表项正在动画中移动。我们创建一个元素，该元素向上移动嵌套在.shaftlement中的.train，其中剪断了溢出Y。要执行此.train在.shaft内具有position:absolute，它们在自身内包含position:relative元素。这是HTML

<div class="content">
    I can pet
      <div class="shaft"> 
        <ol class="train">
            <li>Cats</li>
            <li>Dogs</li>
            <li>Parrots</li>
            <li>All my pets</li>
          </ol> 
      </div>
    !!!!!
  </div>

这也是我们需要照顾的几件事

当动画不弹奏时，第一个孩子是可见的。我们通过将top:0px添加到.train class
一旦结束，动画就处于最终状态。我们只是将animation-fill-mode设置为forwards

这是.trainand的CSS，用于动画go-up

.train {
  position: absolute;
  animation: go-up 3s linear 3s forwards;
  top:0px;
  margin: 0;
  padding: 0;
  list-style: none;

}

@keyframes go-up {
  from {
    transform: translateY(0);
  } 
  to {
    transform: translateY(-100%) translateY(1lh); 
/*translateY(1lh) so the animation stops before last element goes up*/

  }
}

这是.shaft和.content的CSS

.content {
  height: 1lh; 
  display: flex;

}

.shaft {
  display: inline-block;
  min-width: 10ch;
  margin-left:1ch;

  /*Important lines */
  height: 1lh;
  overflow-y: clip;
  position: relative;
}

Codepen仅用于电梯跳动动画。

梯度下划线

对此不起作用的想法

添加下划线：CSS不支持梯度下划线
在.shaft中添加pseudo-element之后，由于overflow-y: clipthing而行不通。

我建议我们添加一个新元素.elevator，该元素是.shaft的父母，其唯一目的是梯度下划线。

这是新结构

<div class="elevator">
      <div class="shaft"> 
        <ol class="train">
            <li>Cats</li>
            <li>Dogs</li>
            <li>Parrots</li> 
            <li> Hamsters </li>
            <li>any pet ever</li>
          </ol> 
     </div>
  </div>

动画在这里很简单
- 对于伪元素，只需使用比例（0）和比例（100％）
- 对于.elevator使用更改宽度属性。
.Elevator及其梯度的代码增长和收缩动画::after伪元素及其本身。

.elevator{ 
  position:relative;
  min-width: #{$--starting-width}; 
  margin-left:1ch;
  animation: grow #{$--expand-anim-dur} linear #{$--init-dur} forwards,  shrink-to-final #{$--shrink-anim-dur} linear #{$--shrink-anim-delay} forwards;

}
@keyframes grow{
  from{
      width:  #{$--starting-width};
  }
  to{
    width:#{$--largest-width}; 
  }
}
@keyframes shrink-to-final{

  to{
    width:#{$--final-wdith}; 
  }
}


.elevator::after{
  content:"";
  display:block;
  position: absolute;
  width:100%;
  height:10px;
  background: var(--gradient-bg);

  transform-origin:left;
  transform:scaleX(0);  
  animation:  expand #{$--expand-anim-dur} linear #{$--init-dur}   forwards, shrink #{$--shrink-anim-dur} linear #{$--shrink-anim-delay} forwards ;

  bottom:-0.5ch;
} 
@keyframes expand{
  from{
  transform:scaleX(0);  

  }
  to{

    transform:scaleX(100%);
  }
}
@keyframes shrink{
  from{transform-origin:right;
    transform:scaleX(100%)}
  to{
    transform-origin:right;
    transform:scaleX(0);
  }
}

渐变舞

首先我们需要设计一个

的梯度

末端变黑
之间的音调较轻这是我使用的

linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(1,1,11,1) 33%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 66%, rgba(9,9,121,1) 100%);

0â€33％固体黑色在这里，因此当我们将背景尺寸设置为300％时。黑色能够覆盖完整的文本。
其余的梯度从黑暗的阴影变成光，然后再次黑暗。该部分将是文本大小的2倍。因此，有足够的空间可以看到效果。

我们无法在CSS中进行动画梯度，而是将梯度添加到背景中，将文本色设置为透明，使用背景剪辑，现在我们有梯度文本。我们通过移动背景来对此进行动画。这是动画和元素。

.train > li:last-child{
  background:var(--gradient-large);
  -webkit-background-clip:text;
  background-size:300%;
  color:transparent;
  animation:  gradient-move #{$--bg-dance-anim-dur} ease-in  #{$--shrink-anim-delay};
}
@keyframes gradient-move{
  from{
    background-position:right; 
  }
  to{
    background-position:left;
  }

编排这个动画

有很多事情要做，我们需要将它们全部绑起来。基本上设置动画持续时间并相应地调整动画延迟很重要。此示例使用SCSS变量来跟踪持续时间并计算延迟。

这是动画发生的顺序

扩展.Elevator +梯度下划线的扩展。

延迟 -$ — init-dur
持续时间 -$ — expand-anim-dur

升级效果

延迟 -$ — go-up-anim-delay:$ — init-dur+$ — expand-anim-dur
持续时间 -$ — go-up-anim-dur

缩小.Elevator +梯度下划线的收缩。

延迟 -$ — shrink-anim-delay:$ — go-up-anim-delay+$ — go-up-anim-dur;
持续时间 -$ — shrink-anim-dur

渐变文本动画

延迟 -$ — shrink-anim-delay:$ — go-up-anim-delay+$ — go-up-anim-dur;Starts带有上一个动画，但持续时间更长。
持续时间 -$ — bg-dance-anim-dur

这是最终产品

感谢您阅读本文，请提供有关它的反馈，并发表评论，如果您找到了一种更好的方法来执行这些部分。
Orignal在medium.com

出版