offset属性中的path()函数可以轻松让任意的HTML元素沿着指定的路径运动,哪怕这个路径是歪歪扭扭,横七竖八的。
比方说:
.horse-run {
offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
animation: move 3s linear infinite;
}
@keyframes move {
100% { offset-distance: 100%;}
}
就可以实现一个马儿沿着不规则路径不停跑的效果。您可以狠狠地点击这里:CSS offset-path实现的马儿不规则路径不停跑demo
效果示意见下 GIF 图:
是一个很棒的特性,对于动效的实现而言,可以说是个超级利器。
只可惜啊,只可惜,都快要2023年了,新冠疫情都要结束了,Safari他老人家居然还没有支持。
只能一声千年长叹了!
当然,也不是没有替代方案,可以使用 SVG SMIL animation 技术,参见我之前写的“超级强大的SVG SMIL animation动画详解 ”一文。
这个特性 Safari 支持老6了:
唉,明年抽个时间再看看吧,希望Safari争点气。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容