CSS3鼠标跟随特效

最新推荐文章于 2025-06-25 15:11:34 发布

原创

最新推荐文章于 2025-06-25 15:11:34 发布 · 2.5k 阅读

14 ·

CC 4.0 BY-SA版权

点击上边的列表,切换样式
主要要思路
思路是鼠标移动过程中,不断生成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;