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

视频: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;
}

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页