如何使用css3实现轨迹运动

这篇文章主要介绍如何使用css3实现轨迹运动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！实现效果：实现代码：

.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 i免费云主机、域名nfinite 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);

}

}

以上是“如何使用css3实现轨迹运动”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注云技术行业资讯频道！

相关推荐: javascript语言中有没有函数重载

这篇文章将为大家详细讲解有关javascript语言中有没有函数重载，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 javascript没有函数重载。同名不同参数的函数之间相互称之为重载，而在javascript中不能实现函…