css3实现圆点,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);
css特效文字
}
}
完成了
到此这篇关于css3 利⽤transform-origin 实现圆点分布在⼤圆上布局及旋转特效的⽂章就介绍到这了，更多相关css3实现圆点分布在⼤圆上布局及旋转内容请搜索脚本之家以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持脚本之家！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。