IT评测·应用市场-qidao123.com

标题: css 实现在一条线上活动小物体（offset-path） [打印本页]
作者: 八卦阵    时间: 2024-12-11 21:29
标题: css 实现在一条线上活动小物体（offset-path）

直接贴代码，留几个参考网址给大家
【SVG】路径＜Path＞标签详解，一次搞懂全部命令参数
探秘神奇的运动路径动画 Motion Path
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <style>
  7.     .mainater {
  8.       width: 200px;
  9.       height: 200px;
  10.     }
  11.     .g-svg {
  12.         position: absolute;
  13.         /* top: 50%;
  14.         left: 50%;
  15.         transform: translate(-50%, -50%); */
  16.     }
  17.     .g-wrap {
  18.         position: relative;
  19.         width: 200px;
  20.         height: 200px;
  21.         margin: auto;
  22.     }
  23.     .ball {
  24.         position: aboslute;
  25.         width: 6px;
  26.         height: 4px;
  27.         /* clip-path: polygon(0 0, 100% 50%, 0 100%); */
  28.         offset-path: path('M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200');
  29.         background: #0AC185FF;
  30.         animation: move 3000ms infinite linear;
  31.     }
  32.     @keyframes move {
  33.         0% {
  34.             offset-distance: 0%;
  35.         }
  36.         100% {
  37.             offset-distance: 100%;
  38.         }
  39.     }
  40.   </style>
  41.   <title>Document</title>
  42. </head>
  43. <body>
  44.   <div class="mainater">
  45.     <div style="scale: 1;">
  46.       <svg class="g-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  47.         <path d="M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200" stroke="#0AC185FF" fill="none" stroke-width="2"/>
  48.       </svg>
  49.       <div class="g-wrap">
  50.           <div class="ball"></div>
  51.       </div>
  52.     </div>
  53.   </div>
  54. </body>
  55. </html>
复制代码
有需求，欢迎探讨

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4