我想为我的网站制作自定义的点击动画,我想做这样的事情:
这是该gif的截图
我的第一个方法是这样的:
它有一些问题,例如,当我单击动画时触发该动画,但是动画跟随鼠标而不是停留在单击坐标中,它缺少很多东西,例如那些散布在点击区域的闪亮粒子和模糊的光晕,我不知道该怎么做,有人知道我该怎么做?例如,我应该学习或寻找什么才能得到想要的东西?我缺乏专业知识,因此我真的希望获得一些指导或任何东西
我不知道这是否有帮助,但我仍将粘贴第一种方法的代码
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
})
body {
margin: 0;
height: 100vh;
background-color: black;
}
.cursor {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
@keyframes cursorAnim3 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.expand {
animation: cursorAnim3 .3s forwards;
border: 2px solid rgba(255, 255, 255, 0.7);
}
<div class="cursor"></div>
欢迎任何建议:c
答案 0 :(得分:1)
我添加到您的代码中的是mousemove
事件中的if语句。我不知道该怎么解释,我只添加了它,它就可以了...希望这就是您想要的! :) PS:由于身体尺寸不断增加,我还添加了overflow-x: hidden
和overflow-y: hidden
。它位于
body {
}
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
if (cursor.classList.length === 1) {
cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
}
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
})
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
background-color: black;
}
.cursor {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
@keyframes cursorAnim3 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.expand {
animation: cursorAnim3 .3s forwards;
border: 2px solid rgba(255, 255, 255, 0.7);
}
<div class="cursor"></div>