色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在這個圓形動畫中使文本居中？

CSS
老白2年前8瀏覽0評論

我發(fā)現(xiàn)了這個很酷的動畫。我想使用，但我不知道如何將文本居中。如果可能的話，我想避免使用絕對位置。

我正在等待類名為& quot文本居中& quot在圈子里。

密碼筆

<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;
      
      &::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);
      }
      
      &::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 {
 // want to get this inside the circle, centered. Would like to avoid position absolute if possible
}

有什么方法可以不使用絕對位置來達(dá)到這個目的嗎？

請嘗試使用這個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;
      
      &::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);
      }
      
      &::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;
}

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

鑒于你已經(jīng)要求回避立場:絕對。

您可以將display:flex添加到文本范圍中，并使用top屬性進(jìn)行對齊。你可以根據(jù)需要調(diào)整它的值

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

工作代碼如下:

@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: '';
  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: "";
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background-color: #000215;
}

body .wrapper .breath .flare1 {
  width: 240px;
  height: 240px;
  content: "";
  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: "";
  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;
}

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