h5很有创意的一个视觉聚焦悬停交互动画

鼠标在交互对象外面时，显示小红点，移动并悬停在按钮上时，显示框形光圈。

h5, hover, focus

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1895
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

const {
    gsap
} = window;

const cursorOuter = document.querySelector(".cursor--large");
const cursorInner = document.querySelector(".cursor--small");
let isStuck = false;
let mouse = {
    x: -100,
    y: -100,
};

// Just in case you need to scroll
let scrollHeight = 0;
window.addEventListener('scroll', function(e) {
    scrollHeight = window.scrollY
})

let cursorOuterOriginalState = {
    width: cursorOuter.getBoundingClientRect().width,
    height: cursorOuter.getBoundingClientRect().height,
};
const buttons = document.querySelectorAll("main button");

buttons.forEach((button) => {
    button.addEventListener("pointerenter", handleMouseEnter);
    button.addEventListener("pointerleave", handleMouseLeave);
});

function updateCursorPosition(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}

function updateCursor() {
    gsap.set(cursorInner, {
        x: mouse.x,
        y: mouse.y,
    });

if (!isStuck) {
        gsap.to(cursorOuter, {
            duration: 0.15,
            x: mouse.x - cursorOuterOriginalState.width / 2,
            y: mouse.y - cursorOuterOriginalState.height / 2,
        });
    }

requestAnimationFrame(updateCursor);
}

updateCursor();

function handleMouseEnter(e) {
    isStuck = true;
    const targetBox = e.currentTarget.getBoundingClientRect();
    gsap.to(cursorOuter, 0.2, {
        x: targetBox.left,
        y: targetBox.top + scrollHeight,
        width: targetBox.width,
        height: targetBox.width,
        borderRadius: 0,
        backgroundColor: "rgba(255, 255, 255, 0.1)",
    });
}

function handleMouseLeave(e) {
    isStuck = false;
    gsap.to(cursorOuter, 0.2, {
        width: cursorOuterOriginalState.width,
        height: cursorOuterOriginalState.width,
        borderRadius: "50%",
        backgroundColor: "transparent",
    });
}

编译

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: rgb(18, 18, 18);
	cursor: none;
}

.cursor {
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 100;
	&--large {
		--size: 40px;
		border: 1px solid rgb(255, 60, 60);
	}
	&--small {
		--size: 10px;
		background: rgb(255, 60, 60);
	transform: translate(-50%, -50%);
	}
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

button {
		--size: 60px;
		border: none;
		min-width: var(--size);
		min-height: var(--size);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.2rem;
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		transition: background 200ms ease, color 200ms ease;
		cursor: none;
	}

&:hover {
		button {
			background: rgba(255, 255, 255, 0.04);
			color: rgba(255, 255, 255, 0.04);
			&:hover {
				color: #fff;
			}
		}
	}
}

.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}

HTML

鼠标在交互对象外面时，显示小红点，移动并悬停在按钮上时，显示框形光圈。

h5, hover, focus

编辑器支持Emmet

快捷键

鼠标在交互对象外面时，显示小红点，移动并悬停在按钮上时，显示框形光圈。

h5, hover, focus

15个创意图片悬停交互动效

5个实用新颖的CSS3菜单按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：