用CSS3实现太阳系效果（“前端”小球不动），如何使其中的文字相对用户不旋转（效果如图），我的思路是让里面的文字也相对小球旋转，一开始文字都是逆时针旋转的，神奇的是“HTML”小球正常，但是另外两个小球中的文字还在相对用户旋转，然后我把这两个文字的旋转方向改为顺时针旋转（小球都是顺时针绕圈的）居然相对用户静止了（就是文字一直正立显示）！小白表示百思不得其解，求大神解答！完整代码如下（重点在.info123,另外也欢迎提出代码优化建议，再次感谢）：<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>css3 winding</title>
<style>
#container { width: 1000px; height: 600px; border: 2px solid #0F80FF; position: relative; }
#ball0 { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #746DFF; border-radius: 50%; text-align: center; }
#ball1 { position: absolute; height: 60px; width: 60px; left: 60%; top: 50%; transform: translate(-50%, -50%) rotate(0); background-color: #ddd; border-radius: 50%; transform-origin: -116.7% 50%; animation: rotate_ball1 6s linear infinite; text-align: center; }
#ball2 { position: absolute; height: 60px; width: 60px; left: 70%; top: 50%; transform: translate(-50%, -50%) rotate(120deg); background-color: #ddd; border-radius: 50%; transform-origin: -283.3% 50%; animation: rotate_ball2 10s linear infinite; text-align: center; }
#ball3 { position: absolute; height: 60px; width: 60px; left: 80%; top: 50%; transform: translate(-50%, -50%) rotate(240deg); background-color: #ddd; border-radius: 50%; transform-origin: -450% 50%; animation: rotate_ball3 14s linear infinite; text-align: center; }
.info0 { display: block; padding: 32px 0; }
.info1 { display: block; padding: 22px 0; animation: rotate_info1 6s linear infinite reverse; }
.info2 { display: block; padding: 22px 0; transform: rotate(-120deg); animation: rotate_info2 10s linear infinite ; }
.info3 { display: block; padding: 22px 0; transform: rotate(-240deg); animation: rotate_info3 14s linear infinite ; }
#ball1:hover { animation-play-state: paused; }
#ball1:hover .info1 { animation-play-state: paused; }
#ball2:hover { animation-play-state: paused; }
#ball2:hover .info2 { animation-play-state: paused; }
#ball3:hover { animation-play-state: paused; }
#ball3:hover .info3 { animation-play-state: paused; }
@keyframes rotate_ball1 { to { transform: translate(-50%, -50%) rotate(1turn); }
}
@keyframes rotate_ball2 { to { transform: translate(-50%, -50%) rotate(480deg); }
}
@keyframes rotate_ball3 { to { transform: translate(-50%, -50%) rotate(600deg); }
}
@keyframes rotate_info1 { to { transform: rotate(1turn); }
}
@keyframes rotate_info2 {
to { transform: rotate(-480deg); }
}
@keyframes rotate_info3 {
to { transform: rotate(-600deg); }
} </style></head><body>
<div id="container">
<div id="ball0"><span class='info0'>前端</span></div>
<div id="ball1"><span class="info1">HTML</span></div>
<div id="ball2"><span class="info2">CSS</span></div>
<div id="ball3"><span class="info3">JS</span></div>
</div></body></html>
2 回答
一笑莫白
TA贡献8条经验 获得超7个赞
.info1 {
display: block;
padding: 22px 0;
animation: rotate_info1 6s linear infinite reverse;
}
.info2 {
display: block;
padding: 22px 0;
transform: rotate(-120deg);
animation: rotate_info2 10s linear infinite reverse;
}
.info3 {
display: block;
padding: 22px 0;
transform: rotate(-240deg);
animation: rotate_info3 14s linear infinite reverse;
}
是这个效果吗
- 2 回答
- 0 关注
- 1475 浏览
添加回答
举报
0/150
提交
取消