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

article/2025/9/24 23:20:48

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://chatgpt.dhexx.cn/article/sSbSDAxj.shtml

相关文章

CSS3实现3d图片旋转动画效果

CSS3实现3d图片旋转动画效果

1.实现原理 1.首先所有的图片的容器position:absolute&#xff0c;叠加在一起&#xff0c;然后一次设置rotateY分别为&#xff08;36*i&#xff09;deg &#xff0c;i取0到10 &#xff1b;所有图片会相交成一个类似花的形状 然后为每个图片的容器设置translateZ&#xff0c;所有…
阅读更多...
CSS3实现立体旋转动画效果

CSS3实现立体旋转动画效果

问题描述 一个3D立体图形在网页中呈现旋转效果，看起来十分炫酷，这个过程的实现其实并不困难，只需要利用CSS3动画效果，并对属性设置合适的参数之后，效果就能实现了。 在解决问题之前，需要先了解CSS3的动画效果是什么，其相关属性和参数有什么含义，这个过程就请查看CSS3动…
阅读更多...
css3d动画：平移、旋转、缩放

css3d动画：平移、旋转、缩放

1、前言&#xff1a; 3d比2d多了一个z轴&#xff0c;这个z轴是垂直我们屏幕的方向&#xff0c;指向我们人眼的是正轴&#xff0c;远离人眼的是负轴&#xff0c;图示如下&#xff1a; 2、景深设置和3d平移 当我们在z轴上向正轴方向上移动物体&#xff0c;也就是向我们眼前移动…
阅读更多...
使用css3属性做一个循环旋转的动画

使用css3属性做一个循环旋转的动画

做这个动画是使用css3中的animation 和 @-webkit-keyframes 组合使用来完成 //这是html部分代码 <div class="home"><imgalt="logo"src="http://b-ssl.duitang.com/uploads/item/201206/26/20120626190359_MjB3s.jpeg"id="images…
阅读更多...
基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5CSS3实现的一些动画特效&#xff1a;图片旋转、无限滚动、文字跳动;实现起来均比较容易&#xff0c;动手来试试! 一、图片旋转 效果图如下&#xff1a; 这个效果实现起来其实并不困难。代码清单如下: <style type"text/css"> #liu{ wid…
阅读更多...
内存碎片产生原因及终极解决办法

内存碎片产生原因及终极解决办法

内存碎片通常分为内部碎片和外部碎片&#xff1a; 1. 内部碎片是由于采用固定大小的内存分区&#xff0c;当一个进程不能完全使用分给它的固定内存区域时就产生了内部碎片&#xff0c;通常内部碎片难以完全避免&#xff1b; 2. 外部碎片是由于某些未分配的连续内存区域太小&…
阅读更多...
6、Redis内存碎片优化

6、Redis内存碎片优化

1、Redis内存碎片是如何形成的 一是内存分配器的分配策略&#xff0c;内存分配器一般是按固定大小来分配内存&#xff0c;而不是按实际使用大小来分配。例如8字节、16字节、32字节...&#xff0c;2KB&#xff0c;4KB&#xff0c;8KB等&#xff0c;按程序申请时最接近某个固定值…
阅读更多...
内存碎片处理技术

内存碎片处理技术

内存碎片处理技术 内存碎片是一个很棘手的问题。如何分配内存决定着内存碎片是否会、何时会、如何会成为一个问题。 即使在系统中事实上仍然有许多空闲内存时&#xff0c;内存碎片还会最终导致出现内存用完的 情况。一个不断产生内存碎片的系统&#xff0c;不管产生的内存碎片…
阅读更多...
内存碎片产生原因及处理

内存碎片产生原因及处理

内存碎片是一个很棘手的问题。如何分配内存决定着内存碎片是否会、何时会、如何会成为一个问题。　　即使在系统中事实上仍然有许多空闲内存时&#xff0c;内存碎片还会最终导致出现内存用完的情况。一个不断产生内存碎片的系统&#xff0c;不管产生的内存碎片多么小&#xff0…
阅读更多...
什么是Redis内存碎片率？碎片如何清理？

什么是Redis内存碎片率？碎片如何清理？

Redis服务器内存不够用了&#xff0c;这时可以看看是否是内存碎片的原因&#xff0c;不一定只能靠内存扩容来处理。 一、碎片率的计算 我们登陆到Redis服务器上&#xff0c;执行以下命令&#xff1a; info memory我们会看到如下的信息&#xff1a; 其中mem_fragmentation_r…
阅读更多...
Redis 内存碎片详解

Redis 内存碎片详解

什么是内存碎片? 你可以将内存碎片简单地理解为那些不可用的空闲内存。 举个例子&#xff1a;操作系统为你分配了 32 字节的连续内存空间&#xff0c;而你存储数据实际只需要使用 24 字节内存空间&#xff0c;那这多余出来的 8 字节内存空间如果后续没办法再被分配存储其他数…
阅读更多...
redis之内存碎片问题如何解决

redis之内存碎片问题如何解决

写在前面 本文一起看下如何处理Redis的内存碎片问题。 1&#xff1a;什么是内存碎片 当操作系统内存充足&#xff0c;但是却无法申请连续N字节内存空间时&#xff0c;这些剩余的内存空间就叫内存碎片。 2&#xff1a;内存碎片是如何形成的 内存碎片的形成有两方面的因素&a…
阅读更多...
如何解决内存碎片

如何解决内存碎片

内存碎片的产生&#xff1a; 内存分配有静态分配和动态分配两种 静态分配在程序编译链接时分配的大小和使用寿命就已经确定&#xff0c;而应用上要求操作系统可以提供给进程运行时申请和释放任意大小内存的功能&#xff0c;这就是内存的动态分配。 因此动态分配…
阅读更多...
内存中，外部碎片与内部碎片，解决办法

内存中，外部碎片与内部碎片，解决办法

什么是内部碎片、外部碎片 外部碎片&#xff0c;是由于大量信息由于先后写入、置换、删除而形成的空间碎片。为了便于理解&#xff0c;我们将信息比作货物&#xff0c;将存储空间比作仓库来举例子。假设&#xff0c;我们有编号为1、2、3、4、5、6的6间仓库库房&#xff0c;前天…
阅读更多...
内存碎片

内存碎片

内存碎片的产生&#xff1a; 内存分配有静态分配和动态分配两种 静态分配在程序编译链接时分配的大小和使用寿命就已经确定&#xff0c;而应用上要求操作系统可以提供给进程运行时申请和释放任意大小内存的功能&#xff0c;这就是内存的动态分配。 因此动态分配…
阅读更多...
内存碎片---内部碎片外部碎片

内存碎片---内部碎片外部碎片

内部碎片的产生&#xff1a;因为所有的内存分配必须起始于可被 4、8 或 16 整除&#xff08;视处理器体系结构而定&#xff09;的地址或者因为MMU的分页机制的限制&#xff0c;决定内存分配算法仅能把预定大小的内存块分配给客户。假设当某个客户请求一个43字节的内存块时&…
阅读更多...
内存碎片是什么？关于内存碎片的解释

内存碎片是什么？关于内存碎片的解释

内存碎片是什么&#xff1f;关于内存碎片 内存碎片通常分为内部碎片和外部碎片。 内部碎片 所谓内部碎片指的就是&#xff0c;系统为某项功能分派了一定的内存&#xff0c;但是该功能的实现没有用完所有系统分配的。余下的部分就被成为内存碎片的内部碎片。 外部碎片 外部内存…
阅读更多...
内存碎片概念

内存碎片概念

内存碎片是无法被系统利用的内存区域&#xff0c;分为外部碎片和内部碎片。 1 外部碎片 系统有空闲内存区域&#xff0c;空闲内存的总量足够&#xff0c;但应用就是分配不到空间。无法被利用的内存被称为外部碎片。假设当前系统内存布局(空白区域表示空闲内存) 例如&#xf…
阅读更多...
内存碎片产生原因及解决方法

内存碎片产生原因及解决方法

文章目录 1、现象描述2、原因分析3、解决方法 1、现象描述 某些应用程序频繁调用 malloc函数申请内存空间&#xff0c;且申请空间的大小差别比较大&#xff0c;使用完成后通过 free函数释放内存空间&#xff0c;但内存空间依然缓存在glibc中&#xff0c;没有归还操作系统&#…
阅读更多...
内存碎片：理解、应用场景和防止措施

内存碎片：理解、应用场景和防止措施

目录 摘要1. 引言2. 内存碎片的概念3. 内存碎片的产生原因4. 应用场景4.1 应用场景一&#xff1a;长时间运行的服务器4.2 应用场景二&#xff1a;嵌入式系统 5. 预防和处理内存碎片6. 示例代码&#xff1a;生成内存碎片7. 总结 摘要 本文旨在向初学者详细介绍内存碎片的概念、…
阅读更多...
推荐文章

Copyright @ 2022~2023