W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #frameDiv { width: 200px; height: 200px; margin: 20px; position: relative; border: solid black 1px; background-color: rgb(205, 242, 205); } #frameDiv > div { width: 50px; height: 50px; background-color: hotpink; offset-path: ray(45deg); animation: moveDiv 3s 3; } @keyframes moveDiv { 100% { offset-distance: 100%; } } </style> </head> <body> <h1>沿 ray() 定义的偏移路径进行动画</h1> <div id="frameDiv"> <div></div> </div> <p>粉色 div 沿 ray() 函数定义的路径进行动画。</p> </body> </html>