css - 绕圈运动中小球里的文字静止问题
本文介绍了css - 绕圈运动中小球里的文字静止问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
用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 {
/* from {
transform: rotate(-120deg);
}*/
to {
transform: rotate(-480deg);
}
}
@keyframes rotate_info3 {
/* from {
transform: rotate(-240deg);
}*/
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>
解决方案
http://www.w3cplus.com/css3/c...
这篇关于css - 绕圈运动中小球里的文字静止问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
