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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
JavaScript 调试器简介
2009/02/21 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
从零学Python之hello world
2014/05/21 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python如何获取系统iops示例代码
2016/09/06 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python如何省略括号方法详解
2020/03/21 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
造型师求职自荐信
2013/09/27 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL