css实现多元素中心旋转

• 一、实现思路
• 二、GIF预览
• 三、实现代码
• • 1.html代码
  • 2.css代码

    ---

    一、实现思路

    	1、先把元素定位到想旋转的位置（中心点）
    	2、确定旋转的方向（顺/逆时针）
    	3、偏移一定距离后（半径）
    	4、最后让元素反方向自转（实现元素文字始终为正向）
    	5、鼠标悬浮动画暂停（可选）
    

    二、GIF预览

    三、实现代码

    1.html代码

    代码如下（示例）：

    
       	
    
    		省级
    	
     	
    
    		市级
    	
    
    

    2.css代码

    代码如下（示例）：

    .MainBox{
    	width: 220px;
     	height: 220px;
    	position: relative;
    	.items {
    		width: 70px;
            height: 70px;
     		position: absolute;
    		top: 75px;
    		left: 75px;
    		.Provincial {
    			animation: action 10s linear infinite;
    		}
    		.Municipal {
    			animation: action1 10s linear infinite;
    		}
    	}
    }
    	//  悬浮后暂停
    .MainBox:hover { 
    	div {
    		animation-play-state: paused;
    	}
    }
        // 旋转动画
    @keyframes action {
    	from {
    		transform: rotate(0deg) translate(78px) rotate(0deg);
    	}
    	to {
    		transform: rotate(360deg) translate(78px) rotate(-360deg);
    	}
    }
    @keyframes action1 {
    	0% {
    		transform: rotate(180deg) translate(78px) rotate(-180deg);
    	}
    	100% {
    		transform: rotate(540deg) translate(78px) rotate(-540deg);
    	}
    }
    

    ---