• 技术文章 >Web开发 >css教程

    CSS中motion path模块的介绍

    小妮浅浅小妮浅浅2021-07-02 16:45:05转载249

    说明

    1、利用这个规范规定的属性,我们可以控制元素按照特定的路径进行位置变换的动画。并且,这个路径可以是非常复杂的一条路径。

    2、CSS传统方式可以实现直线路径动画。

    实例

    将一个物体从A点直线运动到B点,通常而言可以使用transform: translate()、top | left | bottom | right或者是margin之类的可以改变物体位置的属性。

    <div></div>
    div {
     
        width: 60px;
     
        height: 60px;
     
        background: #000;
     
        animation: move infinite 1s alternate linear;
     
    }
     
    @keyframes move {
     
        100% {
     
            transform: translate(100px, 100px);
     
        }
     
    }

    以上就是CSS中motion path模块的介绍,希望对大家有所帮助。更多css学习指路:css教程

    专题推荐:css motionpath
    品易云
    上一篇:CSS如何绘制三角形 下一篇:css不可点击样式实现的方法

    相关文章推荐

    • css中Grid模块是什么• css Flex容器如何理解• css Flexbox布局的介绍• css Flex容器属性有哪些• css flex的排列方式• css中flex-basis的使用• css性能优化的解决办法• css中fraction如何使用• css中outline-offset的使用注意• css如何实现自定义的属性• css自定义属性如何继承• css内边框如何理解• CSS如何绘制三角形

    全部评论我要评论

  • 取消发布评论
  • 

    Python学习网