欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

利用css3实现轨迹运动

利用css3实现轨迹运动,我们在运用css3动画实现轨迹运动的时候,点 A 到点 B 的直线运动,很好实现,而且我们还可以运用贝塞尔曲线,实现运动速度的调整。但是假如我们要实现沿着某个路径运动,或者沿着圆环运动,那么应该如何实现呢

实现效果:

实现代码:

<div class="haorooms-dot "></div>

<style>

    .haorooms-dot {

        width:20px;

        height:20px;

      -webkit-animation: xAxis 2.5s infinite ease-in;;

      animation: xAxis 2.5s infinite ease-in;

        position:relative;

 

    }

 

    .haorooms-dot::after {

      content: 'haorooms';

      display: block;

      width: 20px;

      height: 20px;

      border-radius: 20px;

      background-color: #fff;

      -webkit-animation: yAxis 2.5s infinite ease-out;

      animation: yAxis 2.5s infinite ease-out;

        position:absolute;

    }

 

    @-webkit-keyframes yAxis {

      50% {

        -webkit-animation-timing-function: ease-out;

        animation-timing-function: ease-out;

        -webkit-transform: translateY(-150px);

        transform: translateY(-150px);

      }

    }

 

    @keyframes yAxis {

      50% {

        -webkit-animation-timing-function: ease-out;

        animation-timing-function:ease-out;

        -webkit-transform: translateY(-150px);

        transform: translateY(-150px);

      }

    }

 

    @-webkit-keyframes xAxis {

      50% {

        -webkit-animation-timing-function:ease-in;

        animation-timing-function: ease-in;

        -webkit-transform: translateX(150px);

        transform: translateX(150px);

      }

    }

 

    @keyframes xAxis {

      50% {

        -webkit-animation-timing-function:ease-in;

        animation-timing-function: ease-in;

        -webkit-transform: translateX(150px);

        transform: translateX(150px);

      }

    }

</style>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c17587.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-02-13 13:12 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。