offset 助你动画更上一层楼

昨天在segmentfault.com/a/119000004… 看到一个有趣的动画。

这个大佬按照官网方式实现了这个好玩的动画。先看下这个动画

看到这个动画第一眼想到了最近看到动画路径offset属性。想着应该也能复刻一下动画

什么是offset，就是能控制动画执行路径，直接上MDN。

现在来复刻一下

HTML 结构部分

<section class="outer">
  <div class="move"></div>
  <div class="content"></div>
  </div>
</section>

outer 就是模块容器， move 就是动画元素 contnet 存放图片/文案内容

css部分

在上面的动画中，可以看到在四个角有一个弧度的运行路径，这个时候上offset-path, 定义一个包含四个弧度的长方形运动轨迹

   offset-path:rect(0 100% 100% 0 round 20px);

rect函数就是 绘画一个方形结构路径并且包含一个20px的圆角 这是复刻动画中 最关键的一步。

剩下的都是常规的css编写

.outer {
  --c-radius: 20px;
  --line-width: 1px; /* 白色运动线条宽度*/
  display:inline-block;
  width: 40em;
  height: 10em;
  background-color: black;
  border: 1px solid #1e293b;
  overflow:hidden;
  position: relative;
  border-radius: var(--c-radius);
}
.move {
   display:inline-block;
   width: 4em;
   height: 4em;
   offset-path:rect(0 100% 100% 0 round var(--c-radius));
   animation: move 10000ms infinite normal linear;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

看效果

caniuse

除了ie 其他没啥问题 可以放心食用