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); } }
完成了
到此这篇关于css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效的文章就介绍到这了,更多相关css3实现圆点分布在大圆上布局及旋转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
- 利用CSS3实现图片旋转放大特效
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
- 利用css3 transform实现一个时钟
- transform-origin CSS3 旋转
- CSS3利用text-shadow属性实现多种效果文字特效
- 利用纯css3实现的文字亮光特效的代码演示
- css3-rotate实现超炫环形旋转特效
- 一款纯css3实现的发光屏幕旋转特效
- 利用css3的 transform-origin 画一颗爱心
- 利用CSS3实现图片切换特效
- 利用css3实现div的旋转
- css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin
- 一款利用html5和css3实现的3D滚动特效的教程
- css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果
- 利用CSS3给图片添加旋转背景特效
- 【CSS3】transform-origin以原点进行旋转
- 一款纯css3实现的发光屏幕旋转特效
- css3实例教程 一款纯css3实现的发光屏幕旋转特效