CSS 实现平面圆点绕椭圆动画

前言

👏CSS实现平面圆点绕椭圆动画,速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现原理

transform-style：CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

属性	含义
flat	设置元素的子元素位于该元素的平面中
preserve-3d	指示元素的子元素应位于 3D 空间中

eg：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9XBp2OwZ-1693226202754)(http://172.21.0.82:8000/server/index.php?s=/api/attachment/visitFile/sign/3a84f75dcfa677077584fcb075cb696b)]

transform：
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。transform属性可以指定为关键字值 none 或一个或多个值。

eg:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xrAbTr7O-1693226202755)(http://172.21.0.82:8000/server/index.php?s=/api/attachment/visitFile/sign/c6c8f87e1b83fc43bf08da35b7f119c2)]

查看transform-function

eg:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2iDmlea-1693226202755)(http://172.21.0.82:8000/server/index.php?s=/api/attachment/visitFile/sign/f2da7e0a8df3226e44c9a5c6184e66f8)]

CSS 三角函数语法介绍：
cos(): CSS 函数 cos() 为三角函数，返回某数的余弦值，此值介于 -1 和 1 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为或，即 cos(45deg)、cos(0.125turn) 和 cos(3.14159 / 4) 均表示同一值，约为 0.707。

/* 单个 <angle> 值 */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));/* 单个 <number> 值 */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));/* 其他值 */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));

sin(): CSS 函数 sin() 为三角函数，返回某数的正弦值，此值介于 -1 和 1 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为或，即 sin(45deg)、sin(0.125turn) 和 sin(3.14159 / 4) 均表示同一值，约为 0.707。
CSS3 的这些函数使得开发者可以更加方便处理一些复杂的数学问题，增强了 CSS 的表现力。

/* 单个 <angle> 值 */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));/* 单个 <number> 值 */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));/* 其他值 */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

巧妙利用三角函数关系，实现圆点在圆弧上的translate偏移

x=a*cosr
y=b*sinr

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4x4kqgun-1693226202755)(http://172.21.0.82:8000/server/index.php?s=/api/attachment/visitFile/sign/fef74e47b09d8799480a4afe8fa57ca5)]

3.实现步骤

绘制父元素logo，设置宽高

<div class="logo"></div>

.logo {width: 450px;height: 451px;position: relative;
}

为其添加伪元素，设置背景图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8p28jYe-1693226202755)(http://172.21.0.82:8000/server/index.php?s=/api/attachment/visitFile/sign/1f2634e8786f879e6d0db66c728f9c2e)]

.logo {&::after {content: "";width: 100%;height: 100%;background: url("@/assets/images/ani/logo.png") no-repeat;background-size: 100% 100%;position: absolute;left: 0;top: 0;}
}

为背景图片添加上下浮动动画

&::after {animation: douce 2s infinite linear;@keyframes douce {0%,100% {transform: translateY(0);}50% {transform: translateY(-10px);}}
}

logo标签内绘制line线条

<div class="logo"><div class="line"></div>
</div>

为line设置背景图片，是一个椭圆形状的渐变色线条，基于父元素水平垂直居中
可以发现线条和背景的透视不对

在这里插入图片描述

.line {width: 288px;height: 94px;left: calc(50% - 144px);bottom: 128px;border-radius: 50%;position: absolute;background: url("@/assets/images/ani/circle-round.png") no-repeat;background-size: 100% 100%;
}

尝试去为父元素设置transform-style: preserve-3d，让子元素是位于 3D 空间中

.logo{transform-style: preserve-3d;
}

为子元素line设置transform属性，稍微调整角度,透视关系正常

在这里插入图片描述

.line{transform: rotateZ(0deg) rotateX(1deg);
}

为line添加伪元素，旋转的小圆点，基于line水平垂直居中

在这里插入图片描述

&::after {content: "";position: absolute;width: 11px;height: 11px;background: #5fffa5;border-radius: 50%;left:calc(50% - 5px);top:calc(50% - 5px);
}

为圆点设置旋转动画，使用less简化代码

在这里插入图片描述

animation: move 10s linear infinite;

  .loop(@index,@a, @b, @s) when (@index < @s+1) {// 椭圆x轴半径(长半径)@a// 椭圆y轴半径(短半径)@b// 坐标点的数目(数目越大，动画越精细)@s.loop((@index + 1),@a, @b, @s);@keyframeSel: @index * 100% / @s;@{keyframeSel}{transform: translate((@a * cos(360deg / @s*@index)),(@b * sin(360deg / @s*@index)));}}

@keyframes move {.loop(0,144px,42px,40);
}

3.实现代码

<div class="logo"><div class="line"></div>
</div>

body{background: linear-gradient(90deg, #03224e 0%, #011030 100%);display:flex;align-items:center;justify-content: center;height:100vh;
}
.logo {width: 450px;height: 451px;transform-style: preserve-3d;position: relative;&::after {content: "";width: 100%;height: 100%;background: url("https://i.postimg.cc/Sxn1cPT8/logo.png") no-repeat;background-size: 100% 100%;position: absolute;left: 0;top: 0;animation: douce 2s infinite linear;@keyframes douce {0%,100% {transform: translateY(0);}50% {transform: translateY(-10px);}}}}.line {width: 288px;height: 93px;left: calc(50% - 144px);bottom: 128px;border-radius: 50%;position: absolute;background: url("https://i.postimg.cc/DyZxKDKD/circle-round.png") no-repeat;background-size: 100% 100%;transform-style: preserve-3d;transform: rotateZ(0deg) rotateX(1deg);&::after {content: "";position: absolute;width: 11px;height: 11px;background: #5fffa5;border-radius: 50%;transform-style: preserve-3d;top: 0;left: 0;right: 0;bottom: 0;margin: auto;animation: move 10s linear infinite;}@keyframes move {.loop(0,144px,42px,40);}}.loop(@index,@a, @b, @s) when (@index < @s+1) {// 椭圆x轴半径(长半径)@a// 椭圆y轴半径(短半径)@b// 坐标点的数目(数目越大，动画越精细)@s.loop((@index + 1),@a, @b, @s);@keyframeSel: @index * 100% / @s;@{keyframeSel}{transform: translate((@a * cos(360deg / @s*@index)),(@b * sin(360deg / @s*@index)));}}