在CSS中使用正余弦函数

马黑黑 · 发表于 2025-7-15 13:57

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-7-15 14:57 编辑

先看代码：

<style>
.lzpa {
position: relative;
margin: 100px auto;
width: 600px;
height: 400px;
border: 1px solid gray;
}
li-zi {
position: absolute;
left: calc( 275px + 275px * cos(var(--deg)) );
top: calc( 175px + 175px * sin(var(--deg)) );
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at 60% 60%, lightgreen 1%, green);
}
li-zi:nth-of-type(1) { --deg: 0deg; }
li-zi:nth-of-type(2) { --deg: 90deg; }
li-zi:nth-of-type(3) { --deg: 180deg; }
li-zi:nth-of-type(4) { --deg: 270deg; }
</style>
<div class="lzpa">
<li-zi></li-zi>
<li-zi></li-zi>
<li-zi></li-zi>
<li-zi></li-zi>
</div>

复制代码

代码结构很简单：CSS和HTML均围绕 li-zi 这个自定义元素展开，具体是先建立一个用来装载 li-zi 标签的容器元素，CSS中设置其为相对定位、居中、宽高为600*400、有个边框以便观察 li-zi 的位置；其次创建4个自定义标签 li-zi ，其CSS样式设为绝对定位、left和top属性定位、50*50的宽高、圆形、带美丽的径向渐变背景。

重点在 li-zi 选择器的 left 和 top 属性值的设置：

我们用 calc 函数来计算属性值，calc ( 运算式子 )，式子里数字需要带单位，例如 px、deg 像素和角度单位等。现在来理解calc函数的运算式子。

首先，我们的意图是让 li-zi 标签在容器元素内以最大化的半径绕椭圆圆周布局，所以，我们先得会如何求椭圆圆周上任一点的坐标（x, y）值，rx 和 ry 分别为x、y两个方向上的椭圆半径：

x = rx + rx *  sin(弧度)
y =  ry + ry *  cos(弧度)

放到 li-zi 选择器的 left 和 top 属性，rx = 容器元素宽度 - li-zi宽度的一半，ry = 容器元素高度 - li-zi高度的一半，所以，式子是酱紫（注意数字要带单位）：

left: 275px + 275rx *  cos(弧度);
top:  175px + 175px *  sin(弧度);

要用 calc 函数将式子纳入其中，且弧度使用CSS变量 --deg 来表示，这个变量将在每一个li-zi 设定中单独赋值。最后，left 和 top 属性设置是酱紫：

left: calc( 275px + 275px * cos(var(--deg)) );
top: calc( 175px + 175px * sin(var(--deg)) );

这就将 li-zi 标签完美定位了，它们将长成楼下的样纸——

马黑黑 · 发表于 2025-7-15 13:58

马黑黑 · 发表于 2025-7-15 14:05

在CSS中，如何给每一个 li-zi 标签的 --deg 变量单独赋值：

360 / 总数

例如，需要创建 12 个 li-zi 标签，则每一个标签平均 30 个弧度，酱紫——

li-zi:nth-of-type(1) { --deg: 0deg; } /* 第一个是 0 */
li-zi:nth-of-type(2) { --deg: 30deg; } /* 第二个是 30 */
li-zi:nth-of-type(3) { --deg: 30deg; } /* 第三个是 60 */
/* 这里是其它的伪类 */
li-zi:nth-of-type(12) { --deg: 300deg; } /* 第十二个是 300 */