css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
首先 要使用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);
}
}
完成了
到此这篇关于css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效的文章就介绍到这了,更多相关css3实现圆点分布在大圆上布局及旋转内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考2022-01-25
这篇文章主要介绍了css3 实现圆形旋转倒计时功能,需要的朋友可以参考下2018-02-24
本篇文章主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-13- 本文给大家分享一段css3代码实现鼠标悬停时边框旋转的效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-03
春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了一个福到了的特效，而且是双旋转，感兴2023-01-29
最新评论