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

作者:袖梨 2022-11-14

本篇文章小编给大家分享一下css3利用transform-origin实现圆点分布在大圆上布局及旋转特效代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

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

先上效果图:

圆都是动态的。

步骤如下:

1、transform属性使用:

我们只需要利用这个属性设置我们需要这个点在圆上的那个位置。transform:rotate(你需要的度数deg)。另外我们需要注意一个点(如果是需要小圆分布在大圆的圆边上,我们需要给大圆设置相对属性position: 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:myfirst 10s linear infinite;

myfirst:为绑定@keyframes用的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(360deg);
    }
  }

相关文章

精彩推荐