记录--一个炫酷的css动画

在你左边 · 发表于 2023-8-26 01:53:04

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

最近有一个需求，要我实现一个动画效果，效果如下

简单分析了一下效果，是一个3d的效果，首先是一个圆，接着是两段圆环，第三层是一堆小圆环，最里面是一些线上运动，有着渐变色的矩形。
第一层的圆环很简单。
第二层的圆环其实也挺简单的，只要在设置了border-radius为50%之后，把左右或者上下边的颜色设置为transparent就可以了
第三层的一对小圆环其实是最复杂的。
我们可以先实现一个小圆环

.annulus {
width: 200px;
height: 200px;
background: conic-gradient(
rgb(25, 234, 253) 0,
rgb(25, 234, 253) 4%,
transparent 4%
);
border-radius: 50%;
-webkit-mask: radial-gradient(
transparent,
transparent 50%,
#000 50%,
#000 100%
);
}

复制代码

这里主要用到了两个属性，conic-gradient mask
conic-gradient

conic-gradient 是一种 CSS 渐变方式，它用于创建一个锥形渐变，从圆心向外辐射。与线性渐变和径向渐变不同，锥形渐变是以中心点为起点，按照一定的角度进行渐变。它的语法如下：

conic-gradient([starting position], color-stop1, color-stop2, ...)

复制代码

starting position：锥形渐变的起始位置，默认值是 0deg，表示从顶部开始。你可以使用角度值或关键词 from 来指定起始位置，例如 45deg 或 from left.
color-stop：颜色停止点，定义渐变的颜色和位置。

这里我们把其他地方都设置为透明，只在4%的范围内设置颜色，这样会得到一个扇形。

mask

mask 是一个 CSS 属性，用于创建遮罩效果，即在元素上应用一个遮罩图像或图像源，以控制元素的可见性。它可以让你根据遮罩图像的不透明度来决定元素的哪些部分是可见的，哪些部分是隐藏的。
mask 属性有两种主要用法：

使用图像作为遮罩：

.masked-element { mask: url("mask-image.png"); }

复制代码

这将使 .masked-element 元素的内容受到 mask-image.png 图像的遮罩影响。图像的不透明部分将允许元素内容显示，而图像的透明部分将隐藏元素内容。

使用线性渐变或径向渐变作为遮罩：

.masked-element { mask: linear-gradient(to right, transparent 0%, black 100%); }

复制代码

这里我们只需要把前面部分设置为透明，后一部分设置为不透明，加上这样的遮罩效果，就能得到我们需要的一个扇形了。
我们用radial-gradient和mask的结合就可以实现这样的效果
radial-gradient

radial-gradient 是 CSS 中的一个渐变函数，用于创建径向渐变效果。它允许你在一个元素的背景中创建从一个颜色到另一个颜色的渐变，呈现出一种从中心向外的径向效果。
语法如下：

background: radial-gradient([shape] [size] at [position], color-stop1, color-stop2, ...);

复制代码

radial-gradient 是 CSS 中的一个渐变函数，用于创建径向渐变效果。它允许你在一个元素的背景中创建从一个颜色到另一个颜色的渐变，呈现出一种从中心向外的径向效果。
语法如下：

background: radial-gradient([shape] [size] at [position], color-stop1, color-stop2, ...);

复制代码

[shape] 定义渐变的形状，可以是 circle（圆形）或 ellipse（椭圆形）。
[size] 定义渐变的大小，可以是 closest-side、farthest-side、closest-corner、farthest-corner 或一个长度值。
[position] 定义渐变的中心位置，可以使用关键字（如 center、top left）或百分比/长度值组合。
color-stop 是颜色和位置的组合，用于定义渐变的颜色变化。

到了这里，我们实现了一个小圆环，那么怎么实现一堆按照圆环排列的小圆环呢，那其实就是在生成一堆这样的元素，然后给每次元素不同的rotate角度，就能实现了。
接着是最内层的向上运动的流星动画 这里其实也比较简单，只要画一个小矩形，然后背景加上渐变色，然后加上自下而上的动画就可以实现一个矩形，然后复制多个出来，在动画上要设置不同的持续时间和延时，就能达到随机的效果。
全部代码如下，没有用sass和js去动态生成样式和元素下面的js是鼠标上下拖动时候会翻转。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

复制代码

本文转载于:

https://juejin.cn/post/7271070291689750582

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源:https://www.cnblogs.com/smileZAZ/p/17657687.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

记录--一个炫酷的css动画

本帖子中包含更多资源