【前端笔记】css实现多元素中心旋转

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 { p {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);}}

    ---