CSS影片回到原來的位置，但它不應該

我正在嘗試使用 CSS/JS 為我的游標制作一些影片。我想要一個跟隨游標的圓圈。當我點擊時，我想改變這個圓圈的比例/顏色，讓它變小，用不同的顏色，仍然以游標為中心。

首先，我在 CSS 中使用 translate(-50%,-50%) 將圓圈置于游標的中心。然后，我找到的方法是添加一個類，感謝JS，它可以實作影片，然后在影片完成后很快將其洗掉，因此該函式可以添加與clikcs一樣多的類，并且然后洗掉它們。

問題是，當我單擊時，CSS 中的 translate 屬性似乎停止運行，并且圓圈（.cursor1）開始遠離游標的影片。我認為這是關于 div 的位置，但不知道如何整理它。

這是全域代碼。

var cursor1 = document.querySelector(".cursor1");
var cursor2 = document.querySelector(".cursor2");

function cursorAnimationRemove() {
  cursor1.classList.remove("cursoranimation");
};


/* Function that add the animation class when there is a click, and delete it after 500 ms */
document.addEventListener('click', function() {
  cursor1.classList.add("cursoranimation");
  setTimeout(cursorAnimationRemove, 500);
});


/*Function that allows both circles to track the mouse */
document.addEventListener('mousemove', function(e) {
  cursor1.style.cssText = cursor2.style.cssText = "left: "   e.clientX   "px; top: "   e.clientY   "px;";
});

.cursor1 {
  position: fixed;
  width: 70px;
  height: 70px;
  border: 1px solid black;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #c6c6c6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursoranimation {
  transform: scale(1);
  animation: cursoranimation2 1000ms backwards;
  border: none;
}


@keyframes cursoranimation2 {
    0% {
        background-color: white;
        transform: scale(1);
        transform:translate(-15%,-15%);
    }
    50% {
        background-color: rgb(179, 247, 202);
        transform:scale(0.6);
        transform:translate(-25%,-25%);
    }
    75% {
        background-color: rgb(179, 247, 202);
        transform:scale(0.4);
        transform:translate(-35%,-35%);
    }
    100% {
        background-color: rgb(132, 247, 176);
        transform:scale(0.3);
        transform:translate(-50%,-50%);
    }
}

<div class="cursor1"></div>
<div class="cursor2"></div>

非常感謝那些閱讀我的人，對不起我的英語！

uj5u.com熱心網友回復：

你在尋找這樣的東西嗎？您需要將轉換組合成一個屬性，如下所示：

var cursor1 = document.querySelector(".cursor1");
var cursor2 = document.querySelector(".cursor2");

function cursorAnimationRemove() {
  cursor1.classList.remove("cursoranimation");
};


/* Function that add the animation class when there is a click, and delete it after 500 ms */
document.addEventListener('click', function() {
  cursor1.classList.add("cursoranimation");
  setTimeout(cursorAnimationRemove, 500);
});


/*Function that allows both circles to track the mouse */
document.addEventListener('mousemove', function(e) {
  cursor1.style.cssText = cursor2.style.cssText = "left: "   e.clientX   "px; top: "   e.clientY   "px;";
});

.cursor1 {
  position: fixed;
  width: 70px;
  height: 70px;
  border: 1px solid black;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #c6c6c6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cursoranimation {
  transform: scale(1);
  animation: cursoranimation2 1000ms backwards;
  border: none;
}


@keyframes cursoranimation2 {
    0% {
        background-color: white;
        transform: translate(-50%,-50%) scale(1);
    }
    50% {
        background-color: rgb(179, 247, 202);
        transform: translate(-50%,-50%) scale(0.6); /* translate   scale */ 
    }
    75% {
        background-color: rgb(179, 247, 202);
        transform: translate(-50%,-50%) scale(0.4);
    }
    100% {
        background-color: rgb(132, 247, 176);
        transform: translate(-50%,-50%) scale(0.3);
    }
}

<div class="cursor1"></div>
<div class="cursor2"></div>

標籤：javascript css 动画片

上一篇：kotlin-JetpackOwl示例中的未知語法

下一篇：無法讓JS本機animate()使用高度