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

    CSS中motion path模块的介绍

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

    说明

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

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

    实例

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    <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如何实现自定义的属性• css自定义属性如何继承• css内边框如何理解• CSS如何绘制三角形

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网