十分钟实现鼠标悬停效果,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;
}

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

基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果,这里是实例代码下载 ,项目详情http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心。 随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码扫描我们使用的是google的开源框架Zxing,我们可以去http://code.google.com/p/zxing/下载源码和Jar包,之前我项目中的二维码扫描功能只实现了扫描功能,其UI真的是其丑无比,一个好的应用软件,其UI界面也要被大众所接纳,不然人家就不会用你的软件啦,所以说应用软件功能和界面一样都很重要,例如微信,相信微信UI被很多应用软件所模仿,我也仿照微信扫描二维码效果进行模仿,虽然没有微信做的那么精致,但是效果还是可以的,所以将自己修改UI的代码和扫描二维码的代码分享给大家,一是自己以后项目遇到同样的功能直接拷贝来用,二是给还没有加入二维码功能的人一个参考,站在巨人的肩膀上,哈哈,我之前也是站在巨人的肩膀上加上此功能,接下来跟着我一步一步来实现此项功能,里面去除了很多不必要的文件
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页