鼠标跟随移动灯光和网格

下载代码

html

css

分享到微信朋友圈

html

css

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

html {
  width: 100%;
  height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0E0027;
  position: relative;
  overflow: hidden;
}

.grid {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: #0E0027;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 1px;
  z-index: 0;
  overflow: hidden;
}
.grid .grid-highlight {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, #0e0027 50%);
  z-index: -1;
}
.grid .item {
  background: #0E0027;
  transition: background .25s ease;
}

.lamp {
  position: absolute;
  margin: auto;
  height: 50vh;
  width: 4vh;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 2vh;
  background: #fff;
  z-index: 1;
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, 0 0 2vh 1vh #c0e0fc, 0 0 5vh 1vh #90c8f9, 0 0 10vh 1vh #77bcf8, 0 0 15vh 1vh #5FB0F7, 0 0 20vh 1vh #5FB0F7, 0 0 25vh 1vh #5FB0F7, 0 0 50vh 1vh #5FB0F7;
  transition: box-shadow .5s ease;
}
.lamp--to-left {
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, -1vh 0 2vh 1vh #c0e0fc, -4vh 0 5vh 1vh #90c8f9, -10vh 0 10vh 1vh #77bcf8, -13vh 0 15vh 1vh #5FB0F7, -15vh 0 20vh 1vh #5FB0F7, -25vh 0 25vh 0 #5FB0F7, -50vh 0 50vh 0 #5FB0F7;
}
.lamp--to-right {
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, 1vh 0 2vh 1vh #c0e0fc, 4vh 0 5vh 1vh #90c8f9, 10vh 0 10vh 1vh #77bcf8, 13vh 0 15vh 1vh #5FB0F7, 15vh 0 20vh 1vh #5FB0F7, 25vh 0 25vh 0 #5FB0F7, 50vh 0 50vh 0 #5FB0F7;
}

.tilt-btn {
  position: fixed;
  right: 1rem;
  top: 1rem;
  padding: .5rem 1rem;
  display: block;
  background: #7527ff;
  color: #fff;
  transition: opacity .25s ease;
  cursor: pointer;
}
.tilt-btn--off {
  opacity: .6;
  text-decoration: line-through;
}
.tilt-btn:hover {
  opacity: 1;
  text-decoration: none;
}

JavaScript

// move your mose to move the lamp

console.clear();

let tilt = false; // tilt the lamp!
let ready = false;

const lamp = document.querySelectorAll('.lamp')[0];
const highlight = document.querySelectorAll('.grid-highlight')[0];
const tiltBtn = document.querySelectorAll('.tilt-btn')[0];

let transitionTime = 2;
let ease = Power4.easeOut;

let lastX, threshold = 50;

document.addEventListener('mousemove', move);

tiltBtn.addEventListener('click', function() {
	if (tilt) {
		tilt = false;
		tiltBtn.classList.add('tilt-btn--off');
		lamp.classList.remove('lamp--to-right', 'lamp--to-left');
	} else {
		tilt = true;
		tiltBtn.classList.remove('tilt-btn--off');
	}
});

/* intro movement */
const intro = () => {
	let xPos = window.innerWidth / 2;
	const tl = new TimelineMax();
	tl.set(lamp, {x: xPos});
	tl.to(lamp, transitionTime, {
		x: (xPos * 1.8) - lamp.offsetWidth / 2,
		ease: ease
	});
	tl.to(highlight, transitionTime, {
		x: (xPos * 1.8) - highlight.offsetWidth / 2,
		ease: ease
	}, `-=${transitionTime}`);
	
	tl.to(lamp, transitionTime, {
		x: (xPos * 0.5) - lamp.offsetWidth / 2,
		ease: ease
	}, `-=${transitionTime / 2}`);
	tl.to(highlight, transitionTime, {
		x: (xPos * 0.5) - highlight.offsetWidth / 2,
		ease: ease,
		onComplete: function() {
			ready = true;
		}
	}, `-=${transitionTime}`);
	
	
	lastX = xPos;
}
intro();

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