代码之家 › 专栏 › 技术社区 › Neo78

CSS动画将返回其原始位置,但不应该

animation css javascript

Neo78 · 技术社区 · 2 年前

我正在尝试使用CSS/JS为我的光标制作一些动画。我想要一个圆圈,它跟随着光标的每一个地方。当我点击的时候,我想改变这个圆圈的比例/颜色,这样它就会变小,用不同的颜色,仍然以光标为中心。

首先,我在CSS中用translate(-50%,-50%)将光标上的圆圈居中。然后,我发现的方法是添加一个类来实现动画,然后在动画完成后很快将其删除,这样函数就可以添加任意数量的类,然后删除它们。

问题是,当我单击时,CSS中的translate属性似乎停止工作,圆圈(.cursor1)开始远离光标的动画。我想这是关于部门的位置,但不知道如何解决。

以下是全球代码。

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>

非常感谢你们阅读我的文章,也为我的英语感到抱歉!

1 回复 | 直到 2 年前

Anurag Srivastava 2 年前

你在找这样的东西吗?您需要将变换合并为一个属性,如图所示:

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>