2023年6月12日 22:14:40go评论63阅读模式

英文:

How to center a text inside this circle animation?

问题

我发现了这个很酷的动画。我想要使用它，但我无法弄清楚如何将文本居中在其中。我希望尽量避免使用绝对定位。

我期望具有类名 text-to-center 的文本位于圆形内部。

<div class="outer-circle">
  <span class="text-to-center">0:00:00</span>
  <div class="wrapper">
    
    <div class="breath">
      <div class="flare1"></div>
      <div class="flare2"></div>
    </div>
  </div>
</div>

@keyframes pulse {
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(0.6);
  }
  80% {
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  background-color: #000215;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

.outer-circle {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  box-shadow: 0 0 5px 15px rgba(#2F2B8C, 0.1);
  background-image: radial-gradient(#2F2B8C00, #2F2B8C00 50%, #2F2B8C33 90%);
}

.wrapper {
  animation: pulse 8s cubic-bezier( 0.7, 0, 0.3, 1 )  infinite;
  position: relative;
}

.breath {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  position: relative;
  background-color: #000215;
  animation: rotate 16s linear infinite;
}

.breath::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #D904B5, #2F2B8C);
  box-shadow: 0 0 14px 15px rgba(#2F2B8C, 0.3);
}

.breath::after {
  content: "";
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background-color: #000215;
}

.flare1 {
  width: 240px;
  height: 240px;
  content: "";
  display: block;
  border-radius: 50px;
  background-image: radial-gradient(#D904B563, #D904B500 60%);
  position: absolute;
  left: -70px;
  top: -70px;
  z-index: -1;
}

.flare2 {
  width: 240px;
  height: 240px;
  content: "";
  display: block;
  border-radius: 50px;
  background-image: radial-gradient(#2F2B8C63, #D904B500 60%);
  position: absolute;
  right: -70px;
  bottom: -70px;
  z-index: -1;
}

.text-to-center {
  /* 希望将此文本居中放置在圆内，如果可能的话，不想使用绝对定位 */
}

有没有不使用绝对定位来实现这个效果的方法？

英文:

I found this cool animation. I want to use, but I can't figure out how to center a text inside it. I would like to avoid using position absolute if possible.

I am expecting the text with the class name "text-to-center" to be inside the circle.

Codepen

&lt;div class=&quot;outer-circle&quot;&gt;
&lt;span class=&quot;text-to-center&quot;&gt;0:00:00&lt;/span&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;breath&quot;&gt;
&lt;div class=&quot;flare1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;flare2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

@keyframes pulse {
20% {
transform: scale(1);
}
40% {
transform: scale(0.6);
}
50% {
transform: scale(0.6);
}
60% {
transform: scale(0.6);
}
80% {
transform: scale(1);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
background-color: #000215;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
color: #fff;
.outer-circle {
width: 300px;
height: 300px;
border-radius: 150px;
box-shadow: 0 0 5px 15px rgba(#2F2B8C, 0.1);
background-image: radial-gradient(#2F2B8C00, #2F2B8C00 50%, #2F2B8C33 90%);
}
.wrapper {
animation: pulse 8s cubic-bezier( 0.7, 0, 0.3, 1 )  infinite;
position: relative;
.breath {
width: 300px;
height: 300px;
border-radius: 150px;
position: relative;
background-color: #000215;
animation: rotate 16s linear infinite;
&amp;::before {
content: &#39;&#39;;
position: absolute;
top: 0; 
right: 0; 
bottom: 0; 
left: 0;
z-index: -1;
margin: -3px;
border-radius: inherit;
background: linear-gradient(135deg, #D904B5, #2F2B8C);
box-shadow: 0 0 14px 15px rgba(#2F2B8C, 0.3);
}
&amp;::after {
content: &quot;&quot;;
display: block;
position: relative;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: #000215;
}
.flare1 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#D904B563, #D904B500 60%);
position: absolute;
left: -70px;
top: -70px;
z-index: -1;
}
.flare2 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#2F2B8C63, #D904B500 60%);
position: absolute;
right: -70px;
bottom: -70px;
z-index: -1;
}
}
}
}
.text-to-center {
// want to get this inside the circle, centered. Would like to avoid position absolute if possible
}

Any way to achieve this without using position absolute?

答案1

得分: 0

请尝试使用以下CSS代码：

@keyframes pulse {
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(0.6);
  }
  80% {
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  background-color: #000215;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

.outer-circle {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  box-shadow: 0 0 5px 15px rgba(#2F2B8C, 0.1);
  background-image: radial-gradient(#2F2B8C00, #2F2B8C00 50%, #2F2B8C33 90%);
  position: relative;
}

.wrapper {
  animation: pulse 8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  position: relative;
}

.breath {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  position: relative;
  background-color: #000215;
  animation: rotate 16s linear infinite;
}

.breath::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #D904B5, #2F2B8C);
  box-shadow: 0 0 14px 15px rgba(#2F2B8C, 0.3);
}

.breath::after {
  content: '';
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background-color: #000215;
}

.flare1 {
  width: 240px;
  height: 240px;
  content: '';
  display: block;
  border-radius: 50px;
  background-image: radial-gradient(#D904B563, #D904B500 60%);
  position: absolute;
  left: -70px;
  top: -70px;
  z-index: -1;
}

.flare2 {
  width: 240px;
  height: 240px;
  content: '';
  display: block;
  border-radius: 50px;
  background-image: radial-gradient(#2F2B8C63, #D904B500 60%);
  position: absolute;
  right: -70px;
  bottom: -70px;
  z-index: -1;
}

center {
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-to-center {
  position: relative;
  z-index: 9;
}

希望这可以帮助你。

英文:

Please try with this css :

      @keyframes pulse {
20% {
transform: scale(1);
}
40% {
transform: scale(0.6);
}
50% {
transform: scale(0.6);
}
60% {
transform: scale(0.6);
}
80% {
transform: scale(1);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
background-color: #000215;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
color: #fff;
.outer-circle {
width: 300px;
height: 300px;
border-radius: 150px;
box-shadow: 0 0 5px 15px rgba(#2F2B8C, 0.1);
background-image: radial-gradient(#2F2B8C00, #2F2B8C00 50%, #2F2B8C33 90%);
position: relative;
}
.wrapper {
animation: pulse 8s cubic-bezier( 0.7, 0, 0.3, 1 )  infinite;
position: relative;
.breath {
width: 300px;
height: 300px;
border-radius: 150px;
position: relative;
background-color: #000215;
animation: rotate 16s linear infinite;
&amp;::before {
content: &#39;&#39;;
position: absolute;
top: 0; 
right: 0; 
bottom: 0; 
left: 0;
z-index: -1;
margin: -3px;
border-radius: inherit;
background: linear-gradient(135deg, #D904B5, #2F2B8C);
box-shadow: 0 0 14px 15px rgba(#2F2B8C, 0.3);
}
&amp;::after {
content: &quot;&quot;;
display: block;
position: relative;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: #000215;
}
.flare1 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#D904B563, #D904B500 60%);
position: absolute;
left: -70px;
top: -70px;
z-index: -1;
}
.flare2 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#2F2B8C63, #D904B500 60%);
position: absolute;
right: -70px;
bottom: -70px;
z-index: -1;
}
}
}
}
center {
height: 100%;
position: absolute;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.text-to-center {
position: relative;
z-index: 9;
}

&lt;div class=&quot;outer-circle&quot;&gt;
&lt;center&gt;&lt;span class=&quot;text-to-center&quot;&gt;0:00:00&lt;/span&gt;&lt;/center&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;breath&quot;&gt;
&lt;div class=&quot;flare1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;flare2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

答案2

得分: -1

Here is the translated code snippet:

给定你已要求避免使用 `position: absolute`。

你可以将 `display:flex` 添加到你的文本 `span`，并使用 `top` 属性来对齐。你可以根据需要调整它的值

.text-to-center {
    top: 160px;
    z-index: 200;
    position: relative;
    display: flex;
    justify-content: center;
}

工作代码如下：

<div class="outer-circle">
  <span class="text-to-center">0:00:00</span>
  <div class="wrapper">
    <div class="breath">
      <div class="flare1"></div>
      <div class="flare2"></div>
    </div>
  </div>
</div>

请注意，只有代码部分被翻译，其他内容被忽略。

英文:

Given you have asked to avoid position: absolute.

You can add display:flex to your text span, and use the top property to align. You can adjust it's value as per your need

.text-to-center {
top: 160px;
z-index: 200;
position: relative;
display: flex;
justify-content: center;
}

Working Code below:

@keyframes pulse {
20% {
transform: scale(1);
}
40% {
transform: scale(0.6);
}
50% {
transform: scale(0.6);
}
60% {
transform: scale(0.6);
}
80% {
transform: scale(1);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
background-color: #000215;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
color: #fff;
}
body .outer-circle {
position: relative;
width: 300px;
height: 300px;
border-radius: 150px;
box-shadow: 0 0 5px 15px rgba(47, 43, 140, 0.1);
background-image: radial-gradient(#2f2b8c 0, #2f2b8c 0 50%, #2f2b8c 33 90%);
}
body .wrapper {
animation: pulse 8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
position: relative;
}
body .wrapper .breath {
width: 300px;
height: 300px;
border-radius: 150px;
position: relative;
background-color: #000215;
animation: rotate 16s linear infinite;
}
body .wrapper .breath::before {
content: &#39;&#39;;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -3px;
border-radius: inherit;
background: linear-gradient(135deg, #d904b5, #2f2b8c);
box-shadow: 0 0 14px 15px rgba(47, 43, 140, 0.3);
}
body .wrapper .breath::after {
content: &quot;&quot;;
display: block;
position: relative;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: #000215;
}
body .wrapper .breath .flare1 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#d904b5 63, #d904b5 0 60%);
position: absolute;
left: -70px;
top: -70px;
z-index: -1;
}
body .wrapper .breath .flare2 {
width: 240px;
height: 240px;
content: &quot;&quot;;
display: block;
border-radius: 50px;
background-image: radial-gradient(#2f2b8c 63, #d904b5 0 60%);
position: absolute;
right: -70px;
bottom: -70px;
z-index: -1;
}
.text-to-center {
top: 160px;
z-index: 200;
position: relative;
display: flex;
justify-content: center;
}

&lt;div class=&quot;outer-circle&quot;&gt;
&lt;span class=&quot;text-to-center&quot;&gt;0:00:00&lt;/span&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;breath&quot;&gt;
&lt;div class=&quot;flare1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;flare2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在这个圆形动画中将文本居中？

问题

答案1

答案2

HTML5 汉堡菜单的动画效果

创建一个CSS动画的对角线线条。

背景图像未覆盖整个页面高度。

将HTML表格中的单元格从简单文本更改为超链接。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论