W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #frameDiv { width: 400px; height: 200px; margin: 20px; position: relative; border: solid black 1px; background-color: rgb(205, 242, 205); } img { position: absolute; z-index: 1; width: 70px; offset-path: path('M 50 100 L 350 100'); /* 定义路径 */ offset-rotate: 0.25turn; /* 旋转 0.25 圈，即 90 度 */ animation: moveImg 5s 3; /* 动画：5 秒完成，重复 3 次 */ } svg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; } @keyframes moveImg { /* 动画结束时，偏移距离为 100% */ 100% { offset-distance: 100%; } } </style> </head> <body> <h1>使用“圈(turn)”单位的 offset-rotate 属性</h1> <div id="frameDiv"> <img id="fish1" src="/i/css/fish.svg" alt="fish"> <!-- 鱼的图片 --> <svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5"> <path d="M 50 100 L 350 100" /> <!-- 路径的 SVG 表示 --> </svg> </div> <p>鱼旋转了 0.25 圈，这相当于四分之一圈或 90 度。</p> </body> </html>