css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效

首先 要使用transform-ori gin 属性，必须使用transform 属性，其有很多属性，我们只需要用到transform的rotate属性（设置2D旋转角度），再搭配 transform-origin 设置其中心点。最后搭配css3动画属性animation。完成我们想要的效果。
先上效果图：

圆 都是动态的。
步骤如下：
1、transform属性使用：
我们只需要 利用 这个属性设置我们需要这个点在圆上的那个位置。transform:rotate(你需要的度数 deg )。另外我们需要注意一个点（ 如果是需要小圆分布在大圆的圆边上，我们需要给大圆设置相对属性pos IT ion: relative，给小圆设置绝对属性position: absolute，来 防 止小圆跑到大圆外了 ）。这样我们就完成了第一步。
2、transform-origin属性使用：
首先我们需要明白transform-origin属性的意义。其可以设置3个属性，我理解为分别为依次XYZ三个轴。我们这里需要使用XY2个轴。其默认属性是 50% 50% 0。那么这是啥 意思 呢？很 简单 ，就是以设置了这个transform-origin属性的节点的左上角为起始点。向X轴移动50%，Y轴移动50%。当然如果你想要的中心点不再该节点内，可以使用PX来指定节点外的中心点
第二步我们就能得到一个分部在大圆边界线上的小圆的效果了
3、animation属性使用：
同样，首先我们需要 知道 animation属性为动画，具体自己看文档。我们需要的就是这句话

animation:my First  10s linear infinite;

myfirst：为绑定@keyfr am es用的Id
10s: 时间
linear: 匀速
infinite： 持续 不断

最后搭配@keyframes

 @keyframes myfirst{
    0%{
      transform: rotate(0);
    }
    25%{
      transform:rotate(90deg);
    }
    50%{
      transform:rotate(180deg);
    }
    75%{
      transform:rotate(270deg);
    }
    100%{
      transform: rotate( 360 deg);
    }
  }

完成了

到此这篇关于css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效的 文章 就介绍到这了,更多相关css3实现圆点分布在大圆上布局及旋转内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效 全部内容，希望文章能够帮你解决 css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效的详细内容...