font awesome 图标使用方法参考网站：
https://fontawesome.dashgame.com/
HTML:
代码语言：javascript复制<!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:
代码语言：javascript复制* {
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;
}
今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！
