CSS3软件卸载对话框鼠标跟随动画表情

所属分类: 网页特效-动画效果    2024-12-08 06:10:09

CSS3软件卸载对话框鼠标跟随动画表情 ie兼容10
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

CSS3软件卸载对话框鼠标跟随动画表情(共3个文件)

    • index.html

使用方法

const confirm = document.querySelector('.Confirm');
const boi = document.querySelector('.Boi');
const btnDelete = document.querySelector('.Confirm-Body-Button_Delete');
const btnCancel = document.querySelector('.Confirm-Body-Button_Cancel');
const current = {
	happiness: 0.9,
	derp: 1,
	px: 0.5,
	py: 0.5
};
const target = { ...current };

confirm.addEventListener('mousemove', onMouseMove);
confirm.addEventListener('mouseleave', onMouseLeave);

function onMouseMove({ clientX: x, clientY: y }) {
	let dx1 = x - btnDelete.getBoundingClientRect().x - btnDelete.getBoundingClientRect().width * 0.5;
	let dy1 = y - btnDelete.getBoundingClientRect().y - btnDelete.getBoundingClientRect().height * 0.5;
	let dx2 = x - btnCancel.getBoundingClientRect().x - btnCancel.getBoundingClientRect().width * 0.5;
	let dy2 = y - btnCancel.getBoundingClientRect().y - btnCancel.getBoundingClientRect().height * 0.5;
	let px = (x - confirm.getBoundingClientRect().x) / confirm.getBoundingClientRect().width;
	let py = (y - confirm.getBoundingClientRect().y) / confirm.getBoundingClientRect().height;
	let distDelete = Math.sqrt(dx1 * dx1 + dy1 * dy1);
	let distCancel = Math.sqrt(dx2 * dx2 + dy2 * dy2);
	let happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75);

	target.happiness = happiness;
	target.derp = 0;
	target.px = px;
	target.py = py;
}

function onMouseLeave() {
	target.happiness = 0.9;
	target.derp = 1;
	target.px = 0.5;
	target.py = 0.5;
}

function update() {
	for (let prop in target) {
		if (target[prop] === current[prop]) {
			continue;
		} else if (Math.abs(target[prop] - current[prop]) < 0.01) {
			current[prop] = target[prop];
		} else {
			current[prop] += (target[prop] - current[prop]) * 0.1;
		}
		boi.style.setProperty(`--${prop}`, current[prop]);
	}
	requestAnimationFrame(update);
}

update();

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 动画效果

jquery7种图片动画旋转特效代码

共包含其中动画特效:图片旋转、鼠标滑过旋转、图片无限旋转、图片无限旋转等。
  动画效果
 7285  0

jquery带重力感应的随机气泡跳动特效插件

一个气泡机插件,用于模拟气泡机,在页面上随机生成具有重力(自由落体)和弹跳效果的气泡。
  动画效果
 6241  0

CSS创建的鼠标悬停动画发送邮件按钮

这是一个带悬停动画的邮件发送按钮,鼠标经过按钮会动态的切换到另一种风格以及切换不同的图标。
  动画效果
 2323  0

js+css实现的鼠标移动文本文字阴影动画特效代码

这个CSS代码片段可以帮助您在鼠标移动事件中创建文本阴影动画。移动鼠标时,文本文字会动态生成彩色阴影,从而增加了更吸引人的动画效果。
  动画效果
 3228  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论