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

huangapple go评论67阅读模式
英文:

How to center a text inside this circle animation?

问题

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

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

Codepen

<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 &quot;text-to-center&quot; 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 :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-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;
}
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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月12日 22:14:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76457537.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定