javascript - 以正确的方式围绕 Blue 将元素定位在半圆中-6ren

javascript - 以正确的方式围绕 Blue 将元素定位在半圆中

转载作者：行者123 更新时间：2023-12-04 09:17:39

我有一个蓝色的家伙(蓝色 Angular 色)，我想在他周围的半圆中添加一些元素。
每个元素都是图像的容器和应该位于图像下方的文本范围。
我已经尝试过这个，但正如你看到的元素以这种方式旋转并且每个跨度都没有正确定位。
我怎样才能做到这一点？

.blueAnime {
  width: 30vw;
  height: auto;
}

.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:600px;
}



.coins {
  width: 5vw;
  height: auto;
}

.circle {
    width: 300px;
    height: 30px;
    display: block;
    position: absolute;
    top: 110%;
    left: 50%;
    margin: -15px;
}

.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body> 

<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle two">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle three">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle four">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle five">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle six">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle seven">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle eight">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle nine">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle ten">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

</div>

</body>

</html>

向下滚动以查看蓝色。

最佳答案

首先，让我们正确设置img和span。单.circle元素应如下所示:

.circle {
  display: inline-block;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}

<div class="circle four">
  <img class="coins" src="https://langfox.ir/pictures/coins.png">
  <span>text below</span>
</div>

现在我们有一个 .circle元素设置我们可以定义其中的许多元素，并适本地旋转它们:

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }

<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>

</div>

请注意 .circle元素仍然会旋转 - 我们希望它们都完全水平，就像未旋转的元素一样。我们可以通过使用 rotate(n) 来实现这一点。 translate前后属性(property)!矩阵运算根据它们的顺序产生不同的结果。或者这里的目标是“取消旋转” .circle平移和旋转后的元素。基本上第一次旋转都在视觉上旋转 .circle ，并影响即将到来的变换的方向。然而，第二次旋转只是在视觉上“不旋转” .circle ，并且由于后面没有任何变换操作，所以 .circle 的中心将留在原地。

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw) rotate(0deg); }
.two { transform: rotate(-20deg) translate(40vw) rotate(20deg); }
.three { transform: rotate(-40deg) translate(40vw) rotate(40deg); }
.four { transform: rotate(-60deg) translate(40vw) rotate(60deg); }
.five { transform: rotate(-80deg) translate(40vw) rotate(80deg); }
.six { transform: rotate(-100deg) translate(40vw) rotate(100deg); }
.seven { transform: rotate(-120deg) translate(40vw) rotate(120deg); }
.eight { transform: rotate(-140deg) translate(40vw) rotate(140deg); }
.nine { transform: rotate(-160deg) translate(40vw) rotate(160deg); }
.ten { transform: rotate(-180deg) translate(40vw) rotate(180deg); }

<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    <div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>

</div>

关于javascript - 以正确的方式围绕 Blue 将元素定位在半圆中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63157323/

文章推荐： bash - 使用 samtools 提取两个配偶都未映射的未映射读取？

文章推荐： git - 尝试使用 git LFS 同步 zip 文件，说我空间不足

文章推荐： mysql - 计数与 SQL 聚合不同

c# - 围绕 c++/cli 围绕 native c++ 包装 c#/WPF GUI
这是一种复杂的情况。我正在重构(从头开始)c++，它必须用作 CGI 脚本和独立应用程序的核心。遗憾的是，我从大学开始就没有写过C++，对c#/Java比较熟悉。所以我打算将 WPF 用于 GUI。
geometry - 围绕:before element圈
您好，我正在尝试找出与此线程中提出的问题相同的问题 How to use CSS to surround a number with a circle? 但是 - 每次我这样做时，形状都会变成椭圆形，
string - 围绕 Scala 字符串
如果您在单个语句中执行某些操作，例如“abc”+ stringval +“abc”，那么是一个不可变的字符串副本，还是两个(注意 abc 和 123 在编译时是常量) 奖励回合:使用像下面这样的 St
SQL - 围绕 AND 的 IF 语句
我正在尝试创建一个查询，该查询只会在满足某些条件的情况下添加 AND 子句。这就是我所追求的: SELECT DISTINCT id name active FROM team WHER
Gnuplot:围绕 3d 表面绘制边界框
在使用 Google 的出色绘图工具进行了一些试验后，我正在使用 Gnuplot 绘制几个 3D 图形。我喜欢 Google 工具的一件事是它在表面周围绘制的“边界框”，这让我更容易看到大小。有没有
elasticsearch - 围绕 Elasticsearch 或Solr编写包装是个好主意吗
我们最近从solr迁移到 Elasticsearch 。因此决定以自定义查询格式编写一个包装器，该包装器将转换为 Elasticsearch 查询。将来，如果我们更改为另一个数据存储，则只需要修改此
javascript - 围绕 Canvas 圆绘制条形音箱
我有以下内容将音频剪辑的频率绘制为条形音箱: const drawSinewave = function() { requestAnimationFrame(drawSinewave);
javascript - 围绕 Canvas 中的某个点旋转矩形
我试图围绕其父矩形的中心旋转一个矩形。 child 到 parent 边界的距离必须始终保持不变。我几乎成功了，但我的方法似乎有一个小错误。我似乎找不到问题所在。示例: http://jsfiddl
android - 围绕 SharedPreference 对辅助类进行单元测试
我有一个帮助类来将用户对象保存到共享首选项。我用过 serialize(): String函数和 create(serializedString: String)我的 User 中的函数数据模型。他们
ios - 围绕 UIBezierPath 的可见部分绘制路径
是否可以围绕 UIBezierPath 的可见部分绘制路径？这是我的问题的一个例子这是我想要完成的这是我到目前为止得到的: - (void)drawRect:(CGRect)rect { C
java - 围绕 superfirst 工作
这里，AsciiChecker启用文本形式的矩阵规范。 abstract class AsciiChecker extends AlgoritmicChecker { String[] asc
java - 围绕 ResultSet 和基于索引的检索的常量声明的设计考虑
目前，我有十个不同的查询，它们通过 JDBC 处理，并包装在返回 ResultSet 的函数中。这些 ResultSet 对象中的每一个都由外部程序进行迭代，并将通过其索引而不是根据要求的列名进行访问
java - 围绕 finder 方法的事务
围绕 finder 方法启动事务是否明智: @Transactional public E getParticularEvent(final String id) { return (E)em
javascript - 围绕 Canvas 边缘移动的圆圈
我需要一个围绕 Canvas 边缘移动的圆圈。向右然后向下移动可以正常工作，但是当它需要向左移动时，它会跳到右下角并开始一次又一次地向右移动。我不知道如何解决这个问题。 var can = doc
javascript - 围绕 jQuery 插件
我正在尝试我的第一个 jQuery 插件。 (耶……时间到了!) 我很难思考如何让一个可公开访问的函数正常启动。代码 (function($, doc, win){ "use strict"
c++ - 围绕 OpenGL 场景中的对象旋转有困难
在阅读了很多关于绕相机旋转的指南并询问了一些关于 SO 的其他问题后，我想到了 SSCCE我到目前为止所拥有的。也许这样其他人会更容易理解我需要什么，对我来说答案是什么。到目前为止它看起来像这样:
java - 围绕 java 类传递数据
这里是 Java 菜鸟!我正在努力为我正在编写的 Android 应用程序画龙点睛。本质上，它是一个 RSS 阅读器。异步任务获取 RSS 提要。然后对其进行解析，我想做的最后一点是使用已解析的 RS
php - 围绕 SELECT 语句的一个特定结果添加代码
我有以下代码，从数据库的“类(class)”表中选择标题和图像。 setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
android - 围绕 Canvas 上的枢轴旋转位图
我正在尝试实现一个表盘，其中一只手的位图图像围绕 Canvas 上的表盘中心旋转。基本上在 onDraw() 方法中，我希望能够将图像资源放到 Canvas 上，然后每秒旋转一次。我有每秒触发一次
java - 围绕 JXLoginPane 示例理解框架的问题
我从 SwingX 找到了一个名为 JXLoginPane 的组件在 WindowBuilder 中可用，这似乎是我尝试做的事情的一个很好的起点，但我需要有关如何使用它的更多信息。到目前为止，我发现唯

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 以正确的方式围绕 Blue 将元素定位在半圆中