液体按钮

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

document.querySelectorAll('.button').forEach((elem) => {

const canvas = elem.querySelector('.button__canvas')
	const ctx = canvas.getContext('2d')
	
	const offset = 32
	const background = '#eef'
	const foreground = '#7551e9'

let points = []
	let position
	
	const distance = new Ola({
		value: offset
	})

const size = () => {

canvas.width = canvas.getBoundingClientRect().width
		canvas.height = canvas.getBoundingClientRect().height
		
		position = new Ola({
			x: canvas.width / 2,
			y: canvas.height / 2
		})
		
		const pixelsWidth = canvas.width - offset * 2
		const pixelsHeight = canvas.height - offset * 2
		
		const leftTop = [ offset, offset ]
		const rightTop = [ canvas.width - offset, offset ]
		const rightBottom = [ canvas.width - offset, canvas.height - offset ]
		const leftBottom = [ offset, canvas.height - offset ]
		
		points = []

Array(pixelsWidth).fill().forEach((_, index) => {
			points.push([
				leftTop[0] + index,
				leftTop[1]
			])
		})
		
		Array(pixelsHeight).fill().forEach((_, index) => {
			points.push([
				rightTop[0],
				rightTop[1] + index
			])
		})
		
		Array(pixelsWidth).fill().forEach((_, index) => {
			points.push([
				rightBottom[0] - index,
				rightBottom[1]
			])
		})
		
		Array(pixelsHeight).fill().forEach((_, index) => {
			points.push([
				leftBottom[0],
				leftBottom[1] - index
			])
		})
		
	}

size()
	
	const reset = () => {

ctx.fillStyle = background
		ctx.fillRect(0, 0, canvas.width, canvas.height)

}

const draw = () => {

ctx.fillStyle = foreground
		ctx.beginPath()
		
		points.forEach((point, index) => {
			
			const [ vx, vy ] = attract(point)
						
			if (index === 0) ctx.moveTo(vx, vy)
			else ctx.lineTo(vx, vy)
						
		})
		
		ctx.closePath()
		ctx.fill()

}
	
	const attract = (point) => {
				
		const [ x, y ] = point

const dx = x - position.x
		const dy = y - position.y
		
		const dist = Math.sqrt(dx * dx + dy * dy)
		const dist2 = Math.max(1, dist)
		
		const d = Math.min(dist2, Math.max(12, (dist2 / 4) - dist2))
		const D = dist2 * distance.value
		
		return [
			x + (d / D) * (position.x - x),
			y + (d / D) * (position.y - y)
		]

}

const loop = () => {
		reset()
		draw()
		requestAnimationFrame(loop)
	}

window.onresize = size

canvas.onmousemove = (e) => {

position.set({
			x: e.clientX - e.target.getBoundingClientRect().left,
			y: e.clientY - e.target.getBoundingClientRect().top
		}, 200)
	
	}
	
	canvas.onmouseenter = () => {
		
		distance.set({
			value: 1
		}, 200)
		
	}
	
	canvas.onmouseleave = () => {
		
		position.set({
			x: canvas.width / 2,
			y: canvas.height / 2
		}, 2000)
		
		distance.set({
			value: offset
		}, 12000)
		
	}

loop()

})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg