css圆环运动的两种写法

圆环运动如下，小圆绕大圆运动

 写法有如下两种：

1. transform-origin使用外部旋转点

2. transform-origin使用内旋转点，两圆重合，即不使用transform-origin

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
      *{margin: 0;border: 0;box-sizing: border-box;}
      body{padding-top: 100px;padding-left: 100px;display: flex;}
      .c1{
        width: 200px;
        height: 200px;
        border: 2px solid salmon;
        border-radius: 50%;
        position: relative;
        margin: 0;
      }
      .c2{
        width: 30px;
        height: 30px;
        border: 2px solid skyblue;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        animation: rt1 linear infinite 4s;
        transform-origin: center 113px; /* 大圆半径 + 小圆半径 - 大圆border */
      }
      @keyframes rt1 {
        100% {
          transform: rotate(360deg);
        }
      }
      .d1{
        width: 200px;
        height: 200px;
        border: 2px solid salmon;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin-left: 150px;
      }
      .d2{
        width: 30px;
        height: 30px;
        border: 2px solid skyblue;
        border-radius: 50%;
        animation: rt3 linear infinite 4s;
        display: grid;
        place-items: center;
      }
      /*顺时针旋转，元素旋转*/
      @keyframes rt2 {
        0% {
            transform: rotate(0) translate(-100px);
        }
        100% {
          transform: rotate(360deg) translate(-100px);
        }
      }
      /*逆时针旋转，且保证元素始终正向显示，不旋转*/
      @keyframes rt3 {
        0% {
            transform: rotate(0) translate(100px) rotate(0);
        }
        100% {
            transform: rotate(-360deg) translate(100px) rotate(360deg);
        }
      }
    </style>
</head>
<body>
    <div class="c1"><div class="c2"></div></div>
    <div class="d1"><div class="d2">2</div></div>
</body>
</html>
复制代码

 

posted @   全玉  阅读(580)  评论(0)  编辑  收藏  举报
相关博文：
· css表盘刻度
· svg transform总结
· CSS:transform-origin
· 两种方式实现css三球围绕中心旋转问题
· canvas绘制圆环
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2019-07-19 模板应具有的能力
2018-07-19 双指针查找数组的连续规律子数组问题
2017-07-19 css简写总结
2017-07-19 win10经验总结
点击右上角即可分享
微信分享提示
AI IDE Trae