CSS3鼠标跟随特效

主要要思路
思路是鼠标移动过程中,不断生成div样式,并使用fixed定位到鼠标旁边,并经过一段时间清除生成的div样式,
主要用到CSS3的动画,还有hsla颜色.
HTML
设置样式的列表

<ul>
			<li class="act">✩</li>
			<li>★</li>
			<li>✡</li>
			<li>✹</li>
			<li>✧</li>
			<li>✦</li>
			<li>❆</li>
			<li>✶</li>
			<li>✸</li>
		</ul>

CSS
设置跟随样式生成到消失的动画

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background-color: rgb(2, 10, 34);
			user-select: none;
		}

		ul {
			position: fixed;
			top: 50px;
			left: 50px;
			list-style: none;
			border: 1px solid rgb(209, 170, 110);
		}

		li {
			float: left;
			height: 50px;
			width: 50px;
			padding: 0 20px;
			text-align: center;
			font-size: 50px;
			color: rgb(224, 221, 30);
			line-height: 50px;
			border-right: 1px solid rgb(209, 170, 110);
			z-index: 999;
		}

		li:last-child {
			border-right: none;
		}

		.draw {
			position: fixed;
			width: 1px;
			line-height: 1px;
			cursor: default;
			z-index: 2;
		}

		/* 设置几个鼠标跟随元素消失的动画 */
		@keyframes floatOne {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: translateY(-20px) scale(.2) rotate(45deg);
			}
		}

		@keyframes floatTwo {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: translateY(-35px) scale(.1) rotate(45deg);
			}
		}

		@keyframes floatThree {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: translateY(-50px) scale(.3) rotate(45deg);
			}
		}

		@keyframes floatFour {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: translateY(-65px) scale(.1) rotate(45deg);
			}
		}

		@keyframes floatFive {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: translateY(-80px) scale(.2) rotate(45deg);
			}
		}
	</style>

javascript
先了解一下,hsla颜色格式
转:hsla颜色介绍.
H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。
S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高
L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

1.下面改变H值就能改变颜色,先声明一个定时器改变H的值;

			var H = 0;
			setInterval(function (){
				H <= 360 ? H ++ : H = 0;
			},10)

2.点击列表获取指定li中的文本内容当作鼠标跟随的样式

var ul= document. getElementsByTagName('ul')[0];
			ul.onclick = function (e){
				e = e || window.event;
				var t = e.target || e.srcElement;
				if(t.tagName === "LI"){
					// 更改被选中的 li 的激活样式
					var act = document.querySelector(".act");
					act.classList.remove("act");
					t.classList.add("act");
				}
			}

3.获取鼠标在页面的坐标,设置鼠标跟随元素生成的位置,设置元素的属性.把生成的元素添加入页面中,后用一个定时器,定时清理生成的元素.

var floatTypes = ["floatOne","floatTwo","floatThree","floatFour","floatFive"];//动画名
window.onmousemove = function (e) {
			e = e || window.event;

			var act = document.querySelector(".act");
			//随机获取一个动画
			var floatType = floatTypes[Math.floor(Math.random() * floatTypes.length)];
			var xPos = e.pageX;
			var yPos = e.pageY;
			var drawEle = document.createElement("div");
			//设置生成元素的属性
			drawEle.className = "draw";
			drawEle.style.fontSize = "50px";
			drawEle.style.color = "hsla(" + H + ",100%,70%,1)";
			drawEle.style.left = xPos - 25 + "px";
			drawEle.style.top = yPos - 25 + "px";
			drawEle.style.animation = floatType + " .9s 1";
			drawEle.innerText = act.innerText;
			document.body.appendChild(drawEle);
			setTimeout(function () {
				drawEle.parentNode.removeChild(drawEle);
			}, 800)
		}