十分钟实现鼠标悬停效果，CSS3悬停效果

系统管理员 2022-12-28 08:19 297阅读 0赞

**视频：**[https://www.bilibili.com/video/BV1cy4y1D7mz][https_www.bilibili.com_video_BV1cy4y1D7mz]

**font awesome 图标使用方法参考网站：**

[https://fontawesome.dashgame.com/][https_fontawesome.dashgame.com]

**HTML：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>鼠标悬停效果:微信公众号AlbertYang</title>
    		<link rel="stylesheet" type="text/css" href="cursor.css" />
    		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    	</head>
    	<body>
    		<ul>
    			<li><a href="#"><i class="fa fa-address-card"></i></a></li>
    			<li><a href="#"><i class="fa fa-address-card"></i></a></li>
    			<li><a href="#"><i class="fa fa-drivers-license-o"></i></a></li>
    			<li><a href="#"><i class="fa fa-envelope-open-o"></i></a></li>
    			<li><a href="#"><i class="fa fa-ravelry"></i></a></li>
    			<li><a href="#"><i class="fa fa-snowflake-o"></i></a></li>
    			<div class="cursor"></div>
    		</ul>
    		<script>
    			const cursor = document.querySelector(".cursor");
    			document.addEventListener('mousemove', (e) => {
    				cursor.style.left = e.pageX + 'px';
    				cursor.style.top = e.pageY + 'px';
    			})
    		</script>
    	</body>
    </html>

**cursor.css:**

* {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 100vh;
    	background-color: azure;
    }
    
    ul {
    	position: relative;
    	display: flex;
    }
    
    ul li {
    	list-style: none;
    	margin: 0 30px;
    }
    
    ul li a {
    	position: relative;
    	display: inline-block;
    	font-size: 2em;
    	color: gray;
    	transition: all 0.3s;
    }
    
    ul li:hover a {
    	color: deepskyblue;
    	transform: scale(1.5);
    }
    
    .cursor {
    	position: fixed;
    	width: 0;
    	height: 0;
    	border: 15px solid gray;
    	border-radius: 50%;
    	transform: translate(-50%, -50%);
    	pointer-events: none;
    	transition: width 0.3s, height 0.3s;
    }
    
    ul li:hover~.cursor {
    	width: 80px;
    	height: 80px;
    	border: 3px solid deepskyblue;
    }

![202012121242595.gif][]

由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。**如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[https_www.bilibili.com_video_BV1cy4y1D7mz]: https://www.bilibili.com/video/BV1cy4y1D7mz
[https_fontawesome.dashgame.com]: https://fontawesome.dashgame.com/
[202012121242595.gif]: /images/20221120/73b2f97c9e414a9bb97ca81d6279b09a.png