欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在CSS動畫中沿著一個圓過渡文本？

CSS
張吉惟2年前8瀏覽0評論

我正在開發的代碼是為移動網站和動畫，我期待如下:首先出現一個更大的圓圈，這樣它覆蓋了整個屏幕看起來像一個閃屏，然后這個更大的圓圈將過渡到左下角的小圓圈。隨著里面的圖像，較大的圓圈將向左下角移動。

問題是圓形過渡正常，但文本沒有正常地移到左下角，而是先移到左邊，然后再往下。下面是我嘗試過的代碼。

setTimeout(function() {
  let i = document.getElementById("test");
  let d = document.getElementById("icon-img");

  i.classList.add("active");
  d.classList.add("active");
}, 2000);

.test {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: all 3s ease;
  background: gray;
  transform: scale(100);
  border-radius: 30px;
  left: 20px;
  bottom: 20px;
}

.test.active {
  transform: scale(1);
  transition: all 2s ease;
  left: 20px;
  bottom: 20px;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

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

.before {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 2s ease-in-out;
  width: 50%;
  height: 50%;
  position: fixed;
  font-size: 50px;
}

.before.active {
  left: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  font-size: 15px;
  position: fixed;
  transform: translate(0, 0);
}

<div class="wrapper">
  <div id="test" class="test"></div>
  <div class="myclass">
    <img src="./logo.svg" id="icon-img" class="before"></img>
  </div>
</div>

一個問題是，有些屬性沒有初始值設置，所以它們沒有什么可轉換的。所以你會得到一種跳躍效應。

此代碼片段刪除了用于居中圖像的flex，而是使用left和bottom以及translation來初始居中圖像。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title></title>
  <style type="text/css">
    .test {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      transition: all 3s ease;
      background: gray;
      transform: scale(100);
      border-radius: 30px;
      left: 20px;
      bottom: 20px;
    }
    
    .test.active {
      transform: scale(1);
      transition: all 2s ease;
      left: 20px;
      bottom: 20px;
    }
    
    .wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    .myclass {
      width: 100%;
      height: 100%;
    }
    
    .before {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 2s ease-in-out;
      width: 50%;
      height: 50%;
      position: fixed;
      font-size: 50px;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%, 50%);
      background: pink;
    }
    
    .before.active {
      left: 20px;
      bottom: 20px;
      width: 40px;
      height: 40px;
      font-size: 15px;
      position: fixed;
      transform: translate(0, 0);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="test" class="test"></div>
    <div class="myclass">
      <img src="./logo.svg" id="icon-img" class="before"></img>
    </div>
  </div>
  <script>
    setTimeout(function() {
      let i = document.getElementById("test");
      let d = document.getElementById("icon-img");

      i.classList.add("active");
      d.classList.add("active");
    }, 2000);
  </script>
</body>

</html>