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样式linear-gradient的使用实例
Jan 16 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
You might like
一个简单的PHP入门源程序
2006/10/09 PHP
php生成扇形比例图实例
2013/11/06 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
基于Python绘制个人足迹地图
2020/06/01 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
付款承诺函范文
2015/01/21 职场文书
2015教师年度考核评语
2015/03/25 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL