我可以知道如何将网站的可点击链接排列成一个圆圈吗？我想象这个网站是这样的。
主页
那些白色的单词是可点击的链接。我们如何实现它来重现结果？
谢谢大家！
您可以像本例中那样使用链式CSS转换。
然后它以这种方式工作：
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
transform:
rotate($rot * 1deg)
translate($circle-size / 2)
rotate($rot * -1deg);
}
您可以使用css来完成此操作。
element {
position:absolute;
top:100px;
left:100px;
}
top是你的y值，left是你的x值
我想在看到我们勇敢的战友们的答案后，我知道该怎么做了。虽然我对这些答案有65%的满意，但这对我很有用。
在圆圈中排列可点击链接的HTML代码是：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
--d: 6.5em; /* image size */
--rel: 1; /* how much extra space we want between images, 1 = one image size */
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
--s: calc(2*var(--r) + var(--d)); /* container size */
position: relative;
width: var(--s); height: var(--s);
background: silver /* to show images perfectly fit in container */
}
.container a {
position: absolute;
top: 50%; left: 50%;
margin: calc(-.5*var(--d));
width: var(--d); height: var(--d);
--az: calc(var(--i)*1turn/var(--m));
transform:
rotate(var(--az))
translate(var(--r))
rotate(calc(-1*var(--az)))
}
</style>
</head>
<body>
<div class="container" style="--m: 8; --tan: 0.41">
<a style="--i: 1"; href="https://www.w3schools.com">
Wacky Ideas
</a>
<a style="--i: 2"; href="https://www.w3schools.com">
Galleries
</a>
<a style="--i: 3"; href="https://www.w3schools.com">
Blogs
</a>
<a style="--i: 4"; href="https://www.w3schools.com">
The Future
</a>
<a style="--i: 5"; href="https://www.w3schools.com">
My Adventures
</a>
<a style="--i: 6"; href="https://www.w3schools.com">
Homepage
</a>
<a style="--i: 7"; href="https://www.w3schools.com">
Know Thomas
</a>
<a style="--i: 8"; href="https://www.w3schools.com">
Play with Thomas
</a>
</div>
</body>
</html>
给你这样的输出：
圆形排列的可点击链接