位置: IT常识 - 正文

css的rotate3d实现炫酷的圆环转动动画(css设置3d)

编辑:rootadmin
css的rotate3d实现炫酷的圆环转动动画 1.实现效果

推荐整理分享css的rotate3d实现炫酷的圆环转动动画(css设置3d),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css rotatey,css hue-rotate,css hue-rotate,css实现3d效果,css translate3d,css rotation,css rotatey,css rotatey,内容如对您有帮助,希望把文章链接给更多的朋友!

2.实现原理2.1 rotate3d

rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。

语法:

rotate3d(x, y, z, a)

含义:

x 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。

y 类型,可以是 0 到 1 之间的数值,表示旋转轴 Y 坐标方向的矢量。

z 类型,可以是 0 到 1 之间的数值,表示旋转轴 Z 坐标方向的矢量。

a 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。

2.2 rotateZ

rotateZ:函数定义了一个转换,它可以让一个元素围绕横 Z 轴旋转,而不会对其进行变形。旋转轴围绕原点旋转,而这个原点通过transform-origin 属性来定义(默认的转换原点是 center)。 rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

语法

rotateZ(a)

含义:

rotateZ() 引起的旋转量由指定。如果为正,则顺时针方向移动;如果为负,则逆时针方向移动。 a 是一个‘angle ’,表示旋转的角度。正数角度表示顺时针旋转,负数则表示逆时针旋转。 1turn:一圈,即360deg。90deg = 0.25turn。

2.3 transform-origincss的rotate3d实现炫酷的圆环转动动画(css设置3d)

transform-origin:更改一个元素变形的原点,默认的转换原点是 center。 语法:

transform-origin: center;

含义:

transform-origin属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。 如果定义了两个或更多值并且没有值的关键字,或者唯一使用的关键字是center,则第一个值表示水平偏移量,第二个值表示垂直偏移量。

关键字是方便的简写方法,等同于以下角度值:

keywordvalueleft0%center50%right100%top0%bottom100%2.4 CSS 滤镜 filter 的drop-shadow

drop-shadow:投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本,用特定的颜色绘制并合成在图像下面。 函数接受shadow(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow 属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。

语法:

drop-shadow(offset-x offset-y blur-radius spread-radius color)

含义:

offset-x offset-y (必须): offset-x指定水平距离,其中负值将阴影放置到元素的左侧。offset-y指定垂直距离,其中负值将阴影置于元素之上。如果两个值都为 0,则阴影直接放置在元素后面。

blur-radius (可选) : 阴影的模糊半径,指定为 。值越大,阴影就越大,也越模糊。如果未指定,则默认为 0,从而产生清晰、不模糊的边缘。不允许有负值。

spread-radius (可选): 阴影的扩展半径,指定为 . 正的值会导致阴影扩大和变大,而负的值会导致阴影缩小。如果未指定,则默认为 0,阴影的大小将与输入图像相同。

color (可选): 阴影的颜色,指定为 color。如果未指定,则使用 color 属性的值。如果颜色值省略,WebKit中阴影是透明的。

注意:box-shadow 属性在元素的整个框后面创建一个矩形阴影,而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。

eg:

drop-shadow(16px 16px 10px black)2.5 css伪元素

CSS 伪元素用于设置元素指定部分的样式。 ::before 伪元素可用于在元素内容之前插入一些内容。 ::after 伪元素可用于在元素内容之后插入一些内容。 ::selection 伪元素匹配用户选择的元素部分。

所有 CSS 伪元素:

选择器例子含义::afterp::after在每个 p 元素之后插入内容::beforep::before在每个 p 元素之前插入内容::first-letterp:first-letter选择每个p 元素的首字母::first-linep::first-line选择每个 p 元素的首行::selectionp::selection选择用户选择的元素部分3.实现步骤3.1.实现外层三个转动的圆假设有一个div标签,设置为圆,border颜色进行区分。 .box { border: 2px solid var(--lineColor); border-left: 2px solid var(--color); border-right: 2px solid var(--color); border-radius: 50%; }利用伪元素,再实现两个大小不一的圆。 .box,.box::after,.box::before { border: 2px solid var(--lineColor); border-left: 2px solid var(--color); border-right: 2px solid var(--color); border-radius: 50%;}.box { width: 200px; height: 200px; position: relative; } .box::before { width: 180px; height: 180px; margin-top: -90px; margin-left: -90px; }.box::after { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px;}为div添加rotateZ旋转动画,旋转1圈。

.box { animation: turn 1s linear infinite; transform-origin: 50% 50%;}@keyframes turn { 100% { transform: rotateZ(-1turn); }}重写before和after动画,使三个圆转动有一定层次感。 .box::before { animation: turn2 1.25s linear infinite;}.box::after { animation: turn 1.5s linear infinite;}@keyframes turn2 { 100% { transform: rotateZ(1turn); }}3.2 实现内层三个转动的圆三个div标签,设置为圆。.box-circle,.box-circle1,.box-circle2 { border: 2px solid var(--color); opacity: .9; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%); width: 100px; height: 100px;}分别添加同一个rotate3d旋转动画,设置一定的动画延时。 .box-circle {animation-delay: 0.2s;}.box-circle1 { animation-delay: 1.2s;}.box-circle2 { animation-delay: 2.2s;}@keyframes rotate { 100% { border: none; border-top: 2px solid var(--color); border-bottom: 2px solid var(--color); transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg); }}3.3 实现中间转动的月牙一个伪元素,设置为圆,添加上边框 border-top,通过drop-shadow加强阴影效果。

section::before { content: ''; position: absolute; height: 10px; width: 10px; border-radius: 100%; border-top: 1px solid orange; top: 50%; left: 50%; margin-top: -5px; margin-left: -5px; filter: drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));}为其添加rotataZ旋转一圈的动画。 section::before {animation: turn 1s infinite linear;}4.完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆弧转动</title></head><link rel="stylesheet" href="../common.css"><style> :root { --color: orange; --lineColor: rgba(102, 163, 224, .2); } body { background: #222; overflow: hidden; } section { position: relative; width: 200px; height: 200px; } section::before { content: ''; position: absolute; height: 10px; width: 10px; border-radius: 100%; border-top: 1px solid orange; top: 50%; left: 50%; margin-top: -5px; margin-left: -5px; animation: turn 1s infinite linear; filter: drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color)); } .box, .box::after, .box::before { border: 2px solid var(--lineColor); border-left: 2px solid var(--color); border-right: 2px solid var(--color); border-radius: 50%; } .box::after, .box::before { position: absolute; content: ''; left: 50%; top: 50%; } .box { width: 200px; height: 200px; position: relative; animation: turn 1s linear infinite; transform-origin: 50% 50%; } .box::before { width: 180px; height: 180px; margin-top: -90px; margin-left: -90px; animation: turn2 1.25s linear infinite; } .box::after { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; animation: turn 1.5s linear infinite; } .box-circle, .box-circle1, .box-circle2 { border: 2px solid var(--color); opacity: .9; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: rotate 3s linear infinite; } .box-circle { animation-delay: 0.2s; } .box-circle1 { animation-delay: 1.2s; } .box-circle2 { animation-delay: 2.2s; } @keyframes turn { 100% { transform: rotateZ(-1turn); } } @keyframes turn2 { 100% { transform: rotateZ(1turn); } } @keyframes rotate { 100% { border: none; border-top: 2px solid var(--color); border-bottom: 2px solid var(--color); transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg); } }</style><body> <section> <div class="box"></div> <div class="box-circle"></div> <div class="box-circle1"></div> <div class="box-circle2"></div> </section></body></html>5.更多css相关,尽在苏苏的码云如果对你有帮助,欢迎你的star+订阅!
本文链接地址:https://www.jiuchutong.com/zhishi/299559.html 转载请保留说明!

上一篇:聊聊后端Web开发框架(Python)的简单使用(web后端开发是什么意思)

下一篇:图像边缘检测(图像边缘检测的基本原理)

  • 增值税发票认证在哪里
  • 企业利润对外投资 所得税
  • 金税盘软件
  • 会计做账能否使用复印件做账
  • 个人出租房屋需要办理什么手续
  • 经营者个人所得税申报
  • 一般纳税人净利润如何计算
  • 成品油认证步骤
  • 购进电脑怎么折旧
  • 代建制规定
  • 企业所得税从业人数包括临时工吗
  • 非贸税务备案
  • 企业新增固定资产流程图
  • 个人住房转让纳税标准
  • 其他综合收益转入留存收益还是投资收益
  • 出口企业收入分录
  • 工程收到收据没有发票的会计分录怎么做?
  • 固定资产丢失收入怎么办
  • 海关年检需要什么资料
  • 单位买酒报销如何做账
  • 购买材料,材料未验收入库,货款未付会计分录
  • 投标标费退回怎么做分录
  • 生产性生物资产计提折旧的方法
  • 员工把发票丢了怎么处理
  • 技术服务费如何收取
  • window10怎么用wifi上网
  • 未知文件格式怎么打开
  • 应收账款平均余额怎么理解
  • 财政专项补助资金企业所得税申报
  • 什么是进项税和销项税
  • 暂估成本后发票怎么入账
  • 代办营业执照费用大概多少
  • 员工出差补贴怎么入账
  • php设计思路
  • 暂估入账的固定资产可以计提折旧吗
  • php getdate()方法
  • ensp综合实验配置
  • web前端初级知识点
  • php PATH_SEPARATOR判断当前服务器系统类型实例
  • aes加解密工具
  • 企业资产损失税前扣除管理办法最新
  • 微众银行贷款到期晚2天还
  • 工会收到单位拨款的会计分录
  • 工程公司项目管理部管理制度
  • mysql 5.6安装教程
  • excel表格复杂表头
  • 工程施工新科目
  • 收到现金存款
  • 贷款利息收入如何计算
  • 中级财务会计计算题
  • 劳务费个税账务处理办法
  • 固定资产投资入库申报材料
  • 应交税费会计核算
  • 个体工商户要进行汇算清缴吗
  • 社保稳岗补贴账务处理分录
  • 做账财务费用负数
  • 摊销费用用什么凭证
  • 化肥贸易行业
  • 合资注册公司应该注意什么
  • 作废发票丢了罚款多少
  • mysql_info
  • win7任务管理器是灰色的
  • ubuntu启动conda
  • win7系统按Ctrl+Shift不能切换输入法的图文教程
  • win10系统创建一个快捷bat
  • 阴影效果有什么用
  • 设计师的悲哀
  • 让图片垂直居中
  • unitystudio手机版
  • jquery解析html文本
  • js中arguments
  • 用shell脚本创建用户
  • jqueryif判断
  • 前端跑马灯实现
  • 沧州地税局领导班子
  • ukey开票人是管理员改胃自己时只能开电子发票
  • 税务局冬季作息时间
  • 税务代收是什么意思
  • 电脑上怎么登录个人网络
  • 收购农民自产农产品可以使用现金
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设