如何使用css3实现轨迹运动
这篇文章主要介绍如何使用css3实现轨迹运动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于企业网络营销推广、网站重做改版、费县网站定制设计、自适应品牌网站建设、H5建站、商城建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为费县等各大城市提供网站开发制作服务。
实现效果:
实现代码:
.haorooms-dot{
width:20px;
height:20px;
-webkit-animation: xAxis2.5s infinite ease-in;;
animation: xAxis2.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: yAxis2.5s infinite ease-out;
animation: yAxis2.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);
}
}
以上是“如何使用css3实现轨迹运动”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享文章:如何使用css3实现轨迹运动
浏览路径:http://scjbc.cn/article/pccphj.html