CSS鼠标特效【动画跟随】

小羊羔丢了

已于 2022-04-25 11:36:45 修改

阅读量748

点赞数 1

分类专栏：样式文章标签：前端

于 2022-04-25 11:34:42 首次发布

本文链接：https://blog.csdn.net/Qing_0124/article/details/124401234

版权

样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS:

<script>
	document.addEventListener('mousemove', function(e) {
		let body=document.querySelector("body")
		let star=document.createElement("span")
		star.style.left=e.offsetX+"px"
		star.style.top=e.offsetY+"px"
		body.appendChild(star)
		setTimeout(()=>{
			star.remove()
		},1000)
	})
</script>

CSS:

body {
    background: #111;
    /* 超出屏幕的不显示 */
    overflow: hidden;
}

span {
    position: absolute;
    /* 禁用 */
    pointer-events: none;
    animation: fadeInOut 1s linear infinite;
}

@keyframes fadeInOut {
    0%,
    100% {
        opacity: 1;
    }
    20%,
    80% {
        opacity: 1;
    }
}

span:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: url(../img/wu.png);
    /* 让图片填满设置的框子大小 */
    background-size: cover;
    animation: moveShape 1s linear infinite;
}

@keyframes moveShape {
    0% {
        transform: translate(0) rotate(0deg);
    }

    100% {
        transform: translate(100px) rotate(360deg)
    }
}

效果图（图片可在css里自行更换）：