css实现围绕中心进行圆形旋转-编程知识

css实现围绕中心进行圆形旋转

效果如下
在这里插入图片描述
通过css animation属性能实现以上效果

先试用定位，将每一项设置一个初始位置
{cursor: pointer;left: 50%;width: 144px;height: 144px;display: flex;align-items: center;justify-content: center;margin-left: -72px;top: 228px;position: absolute;animation: action2 12s linear infinite;-webkit-animation: action2 12s linear infinite;
}// translateX 设置的距离为到圆心的距离
// 内层
@keyframes action2 {100% {transform: rotate(0deg) translateX(174px) rotate(0deg);-webkit-transform: rotate(0deg) translateX(174px) rotate(0deg);-moz-transform: rotate(0deg) translateX(174px) rotate(0deg);-ms-transform: rotate(0deg) translateX(174px) rotate(0deg);-o-transform: rotate(0deg) translateX(174px) rotate(0deg);}0% {transform: rotate(360deg) translateX(174px) rotate(-360deg);-webkit-transform: rotate(360deg) translateX(174px) rotate(-360deg);-moz-transform: rotate(360deg) translateX(174px) rotate(-360deg);-ms-transform: rotate(360deg) translateX(174px) rotate(-360deg);-o-transform: rotate(360deg) translateX(174px) rotate(-360deg);}
}//外层
@keyframes action {0% {transform: rotate(0deg) translateX(290px) rotate(0deg);-webkit-transform: rotate(0deg) translateX(290px) rotate(0deg);-moz-transform: rotate(0deg) translateX(290px) rotate(0deg);-ms-transform: rotate(0deg) translateX(290px) rotate(0deg);-o-transform: rotate(0deg) translateX(290px) rotate(0deg);}100% {transform: rotate(360deg) translateX(290px) rotate(-360deg);-webkit-transform: rotate(360deg) translateX(290px) rotate(-360deg);-moz-transform: rotate(360deg) translateX(290px) rotate(-360deg);-ms-transform: rotate(360deg) translateX(290px) rotate(-360deg);-o-transform: rotate(360deg) translateX(290px) rotate(-360deg);}
}