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的opacity属性设置透明效果的用法
May 09 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
You might like
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python求crc32值的方法
2014/10/05 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python如何对链表操作
2020/10/10 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
先进个人获奖感言
2014/01/24 职场文书
趣味活动策划方案
2014/02/08 职场文书
《海底世界》教学反思
2014/04/16 职场文书
中班幼儿评语大全
2014/04/30 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android