【前端笔记】css实现多元素中心旋转
css实现多元素中心旋转
- 一、实现思路
- 二、GIF预览
- 三、实现代码
- 1.html代码
- 2.css代码
一、实现思路
1、先把元素定位到想旋转的位置(中心点)
2、确定旋转的方向(顺/逆时针)
3、偏移一定距离后(半径)
4、最后让元素反方向自转(实现元素文字始终为正向)
5、鼠标悬浮动画暂停(可选)
二、GIF预览
三、实现代码
1.html代码
代码如下(示例):
<div className="MainBox ">
<div className='Provincial items'>
省级
</div>
<div className='Municipal items'>
市级
</div>
</div>
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);
}
}
CSDN-Ada助手: 恭喜你的第三篇博客!看到你不断分享关于Antd table 前端封装导出表格组件的经验,真的很受启发。希望你可以继续保持创作的热情,不断探索更多前端封装导出表格组件的相关内容,并且可以分享更多实用的经验和技巧。希望你可以继续保持谦虚的态度,不断学习和进步,期待你的下一篇作品! CSDN 正在通过评论红包奖励优秀博客,请看红包流:https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3