绕圈运动中小球里的文字静止问题

Question

绕圈运动中小球里的文字静止问题

发布于
2016-11-06

用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>

css html

阅读 3.6k

1 个回答

得票最新

AidenCao

6021110

发布于
2016-11-07

✓ 已被采纳

http://www.w3cplus.com/css3/c...

撰写回答