視頻：https://www.bilibili.com/video/BV1cy4y1D7mz
十分鐘實現鼠標懸停效果，CSS3懸停效果
font awesome 圖標使用方法參考網站：
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;
}
由於本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正。如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，加油。如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！