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


Posted in HTML / CSS onApril 29, 2021

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

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

圆都是动态的。
步骤如下:
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实现圆点分布在大圆上布局及旋转内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3发光搜索表单分享
Apr 11 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
You might like
php获取新浪微博数据API实例
2013/11/12 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
React实现全选功能
2020/08/25 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python 第一步 hello world
2009/09/25 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
手工社团活动方案
2014/02/17 职场文书
教师校本培训方案
2014/02/26 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
温馨提示标语
2014/06/26 职场文书
2014年团支部工作总结
2014/11/17 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
求职信格式范文
2015/03/19 职场文书
飞越疯人院观后感
2015/06/09 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android