Css3动画 - 小圆围绕大圆的自转公转

最新推荐文章于 2023-06-17 17:03:14 发布

清晏23

最新推荐文章于 2023-06-17 17:03:14 发布

阅读量3.9k

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/sinat_36539161/article/details/83901278

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一个面试题，题目：实现一个小圆围绕大圆转圈

例1】、先让她转起来，也就是自转：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>       
        .circle{
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background: #f8f806;
            border-radius: 50%;
            text-align: center;
            color: #fff;
        }
        .round{
            background: #fff;
            border-width: 50px;
            border-style: solid;
            border-color: #000 #eed784 #000 #eed784;;
            box-sizing: border-box;
            animation:round 3s infinite linear;
            transform-origin: 50% 100px;    
        }   
        @keyframes round{
            to{transform:rotate(1turn);}
        }               
    </style>
</head>
<body>    
    <div class="circle round">  
</body>
</html>

自转，仿黑胶唱片效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>
        .record{
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: #061410;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            animation:spin 3s infinite linear;
            transform-origin: 50% 50%;      
        }
        .inner{
            box-sizing: border-box;
            border: 10px solid #eed784;
            width: 70px;
            height: 70px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 50%;
            background: #fff;
            line-height: 50px;
            font-size: 24px;
        }
        @keyframes spin{
            to{transform: rotate(1turn);}
        }       
    </style>
</head>
<body>        
    <div class="record">
        <div class="inner">R</div>
    </div>    
</body>
</html>

例2】、小圆在大圆内公转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>       
        .circle{
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background: #000;
            border-radius: 50%;
            text-align: center;
            color: #fff;
        }

        .ball1{
            display: inline-block;
            width: 30px;
            height: 30px;       
            border-radius: 50%;
            background: #eed784;            
            animation:spin1 3s infinite linear;
            transform-origin: 50% 100px;    
        }
        @keyframes spin1{
            to{transform: rotate(1turn);}
        }

    </style>
</head>
<body>
    <div class="circle">
        <div class="ball1">H</div>
    </div>    
</body>
</html>

例3】、小圆在大圆外公转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>       
        .circle{
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background: #000;
            border-radius: 50%;
            text-align: center;
            color: #fff;
        }
        .ball2{
            display: inline-block;
            width: 30px;
            height: 30px;       
            border-radius: 50%;
            background: #eed784;
            position: relative;
            top: -30px;
            animation:spin2 3s infinite linear;
            transform-origin: 50% 130px;    
        }
        @keyframes spin2{
            to{transform: rotate(1turn);}
        }           
    </style>
</head>
<body>        
    <div class="circle">
        <div class="ball2">H</div>
    </div>
</body>
</html>

最后，你可以试试实现小圆在大圆内/外，公转同时自转？

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>       
        .circle{
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background: #000;
            border-radius: 50%;
            text-align: center;
            color: #fff;
        }       
        .ball1{
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;     
            border-radius: 50%;
            background: #eed784;            
            animation:spin1 3s infinite linear;
            transform-origin: 50% 100px; 
            /* transform-origin: 50% 50%; 不设置则自转*/
        }
        @keyframes spin1{
            to{ transform: rotate(1turn);}
        }
        .inner1{
            animation: spin-reverse 3s infinite linear;
        }
        /* 留意此处的 to | from */
        @keyframes spin-reverse{
            to{
                transform:rotate(1turn);
            }
        }           
    </style>
</head>
<body>    
    <div class="circle">
        <div class="ball1"><div class="inner1">H</div></div>
    </div>
</body>
</html>

One more thing，小圆公转，但不自转:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>       
        .circle{
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background: #000;
            border-radius: 50%;
            text-align: center;
            color: #fff;
        }       
        .ball1{
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;     
            border-radius: 50%;
            background: #eed784;            
            animation:spin1 3s infinite linear;
            transform-origin: 50% 100px; 
            /* transform-origin: 50% 50%; 不设置则自转*/
        }
        @keyframes spin1{
            to{ transform: rotate(1turn);}
        }
        .inner1{
            animation: spin-reverse 3s infinite linear;
        }
        /* 留意此处的 to | from */
        @keyframes spin-reverse{
            from{
                transform:rotate(1turn);
            }
        }           
    </style>
</head>
<body>    
    <div class="circle">
        <div class="ball1"><div class="inner1">H</div></div>
    </div>
</body>
</html>