css的rotate3d实现炫酷的圆环转动动画

news2024/11/20 20:41:50

1.实现效果

在这里插入图片描述

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-origin

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

transform-origin: center;

含义：

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

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

keywordvalue
left0%
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+订阅！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/408819.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【面试题】redux及中间件相关面试题解析

【面试题】redux及中间件相关面试题解析

1、什么是Redux&#xff1f; Redux就是一个js容器&#xff0c;用于全局的状态管理 2、为什么在React项目中要使用Redux&#xff1f; 因为React本质上就是一个UI库&#xff0c;它是单向数据流的&#xff0c;就是说数据只能从父组件通过props流向子组件&#xff0c;但如果子组…
阅读更多...
Vue 无感刷新token

Vue 无感刷新token

关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已经过期 刷新token的一些方案…
阅读更多...
零基础JavaScript学习【第六期】

零基础JavaScript学习【第六期】

博主有话说：这个礼拜有些忙，离上一次更新已经过了亿天，这几天较忙所以更新会有点慢，谢谢大家的支持。(っ•̀ω•́)っ✎⁾⁾ 我爱学习 个人空间：GUIDM的个人空间 专栏内容：零基础JavaScript学习 基础还是关键。 欢迎大家的一键三连。 前情回顾：第一期https://blog.cs…
阅读更多...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程

uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程

前言 关于 uni-app 项目中接入微信支付的文章鱼龙混杂，各种 JSAPI / JS-SDK 乱代码、过时、没注释、不讲流程原理，非常难用。 本文实现了 uni-app H5 移动端网页项目，实现微信支付功能，详细讲解接入流程及超详细示例代码， 从 0-1 完全站在小白的角度，让您无需太多知识也…
阅读更多...
【React】React入门--生命周期

【React】React入门--生命周期

&#x1f380;个人主页&#xff1a;努力学习前端知识的小羊 感谢你们的支持&#xff1a;收藏&#x1f384; 点赞&#x1f36c; 加关注&#x1fa90; 文章目录React生命周期初始化阶段运行中阶段销毁阶段老生命周期的问题新生命周期代替性能优化的方案重要的勾子即将废弃的勾子R…
阅读更多...
【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

重要的不是过去&#xff0c;而是你怎末看待过去&#xff0c;而我们对过去的看法&#xff0c;是可以改变的。 效果预览&#xff1a; &#xff08;1&#xff09;删除表格外框&#xff0c;内框。 &#xff08;2&#xff09;添加表头边框&#xff0c;修改表头文字大小、颜色 &…
阅读更多...
猿创征文 |【高级篇】Java 进阶之JVM实战

猿创征文 |【高级篇】Java 进阶之JVM实战

文章目录⚡前言一、面试题解析二、JVM 理论详解⛅JVM的位置❄️JVM的体系结构⏳类加载器三、JVM 双亲委派机制四、Native 关键字五、PC寄存器 与 方法区六、栈与堆七、三种JVM、新生区、老年区、永久区⛵小结⚡前言 JVM 是 Java 实现 跨平台的基础&#xff0c;所有的Java 程序…
阅读更多...
[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

如上图所示&#xff0c;这是我解决好的&#xff0c;刚开始的时候爆红有这些&#xff1a; 我按照在网上查找的方法&#xff0c;一一试了。 首先&#xff0c;maven 安装的路径和和本地仓库的目录必须要保持一致 打开setting-Build,Excution,Deployment-Build Tools-Maven&#…
阅读更多...
vue框架介绍

vue框架介绍

概述 Vue 是一套用于构建用户界面的渐进式框架 对渐进式的理解&#xff1a; 每个框架都不可避免会有自己的一些特点&#xff0c;从而会对使用者有一定的要求&#xff0c;这些要求有强有弱&#xff0c;它的强势程度会影响在业务开发中的使用方式。 vue的定位&#xff1a; 我在做…
阅读更多...
【Vue入门必备知识篇03】--- 生命周期 数据共享

【Vue入门必备知识篇03】--- 生命周期 数据共享

前言❤️ 过好自律的生活&#xff0c;美好才会在路上不期而遇 ❤️【Vue入门必备知识篇03】--- 生命周期 & 数据共享一、生命周期 & 数据共享&#xff08;1&#xff09;组件的生命周期1.1 生命周期 & 生命周期函数1.2 组件生命周期函数的分类1.3 生命周期图示&…
阅读更多...
记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

总结一下自己在把Chrome V2版本的插件升级到V3版本的过程中&#xff0c;遇到的一些问题&#xff0c;之前也有发布一章V3版本的manifest.json配置项参数说明&#xff0c;基本也涵盖了下面提到的几个配置项的改动&#xff0c;传送门>> 总结分了两大块&#xff0c;一块是ma…
阅读更多...
【Node.js】深度解析常用核心模块-fs模块

【Node.js】深度解析常用核心模块-fs模块

✅ 作者简介&#xff1a;一名将要迈入大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f525;前言 在文章&#x1f449;Node.js — 前…
阅读更多...
React脚手架工具创建项目的详细介绍

React脚手架工具创建项目的详细介绍

文章目录React脚手架工具脚手架工具解析create-react-app创建React项目目录的结构分析从零编写代码React脚手架工具 脚手架工具解析 如果我们只是开发几个小的demo程序&#xff0c;那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分; 比如如何管理文件之间的相互依…
阅读更多...
Python lxml库的安装和使用

Python lxml库的安装和使用

lxml 是 Python 的第三方解析库&#xff0c;完全使用 Python 语言编写&#xff0c;它对 Xpath 表达式提供了良好的支持&#xff0c;因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 安装lxml库 lxml 属于 Python 第三方库&#xff0c;因此需要…
阅读更多...
全网多种方式解决Unchecked runtime.lastError: The message port closed before a response was received的错误

全网多种方式解决Unchecked runtime.lastError: The message port closed before a response was received的错误

文章目录1. 文章引言2. 分析问题3. 解决问题4. 解决该错误的其他方法1. 文章引言 今天启动项目后访问Knife4j接口文档&#xff0c;却报出下图错误&#xff1a; 在报出Knife4j文档请求异常错误时&#xff0c;赶紧打开控制台&#xff0c;如下所示&#xff1a; 即Unchecked runti…
阅读更多...
CSS过渡动画

CSS过渡动画

css中实现动画有两种方式&#xff1a;transition过渡动画、 animation自定义动画。 transition 是 css3 新增的⼀个功能&#xff0c;可以实现元素不同状态间的平滑过渡&#xff08;当元素从⼀个状态进⼊到另⼀个状态时&#xff09;&#xff0c;经常⽤来制作⼀些动画效果。 之…
阅读更多...
前端项目面试核心问题（持续更新）

前端项目面试核心问题（持续更新）

本文有配套视频教程 项目面核心问题回答思路 说说你最近的项目 记叙文的六要素&#xff1a;时间、人物、地点、起因、经过、结果&#xff1b;时间&#xff1a;研发周期&#xff1b;人物&#xff1a;团队成员、分工、我负责哪几个模块&#xff1b;起因&#xff1a;项目背景、…
阅读更多...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分）

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分）

基于 Vue3.x Vant UI 的多功能记账本&#xff08;三&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;三&#xff09;项目演示开发导航栏1、底部导航栏2、测试底部导航栏3、公共头部写到最后&#xff08;附源码&#xff09;系列内容参考链接基于 Vue3.x …
阅读更多...
element-UI组件之日期时间选择器与时间格式转化

element-UI组件之日期时间选择器与时间格式转化

element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime()进行日期(时间)格式的转换时间选择器el-time-select选择固定时间点el-time-picker选择任意时间点禁…
阅读更多...
Vite 基本配置及原理

Vite 基本配置及原理

Vite 基本配置及原理介绍vite.config.jsoptimizeDeps.exclude不同环境的 vite 配置css配置Vite 对 css 的处理Vite 对 cssmodule 的处理和配置Vite 对预处理器的配置devSourcemapVite 对 postcss 的支持Vite 静态资源别名设置Vite 生产环境配置介绍 如果你还不知道 Vite&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023