css路径动画实现运动效果-html代码-BFW代码库

css路径动画实现运动效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
main {
  width: 500px;
  height: 310px;
  position: relative;
}
div {
  display: none;
  position: absolute;
  will-change: offset-distance;
  border-radius: 30%;
  width: 8px;
  height: 4px;
  border: 3px solid currentColor;
  color: hsl(143,100%,50%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 20% 50%);
  offset-path: path("M20,10 H480 L 490,20 V 280 L 480,290 H20 L 10,280 V 20 z M60,290 l40,-60 h300 l30,60 M150,100 a30,30 1 1,0 .1,0 M350,100 a30,30 1 1,0 .1,0 M150,80 a50,50 1 1,0 .1,0 M350,40 a90,90 1 1,0 .1,0 M102,118 L 30,260 c-5,20 10,20 20,20 h 410 c15,0 10,-20 10,-20 L435,100");
  //animation: play 12000ms infinite alternate ease-in-out;
}

div:nth-of-type(3n+2) {
  color: hsl(163,100%,50%)
}
div:nth-of-type(3n+3) {
  color: hsl(183,100%,50%)
}

@keyframes play {
  100% {
    offset-path: path("M20,1.........完整代码请登录后点击上方下载按钮下载查看