如何使用css3實(shí)現(xiàn)軌跡運(yùn)動(dòng)

這篇文章主要介紹如何使用css3實(shí)現(xiàn)軌跡運(yùn)動(dòng)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

<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>

以上是“如何使用css3實(shí)現(xiàn)軌跡運(yùn)動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！