首页 > 代码库 > 鼠标移入时闪闪发光的效果

鼠标移入时闪闪发光的效果

2024-10-15 07:54:39   214人阅读

<!doctype html>

[code=html,html 代码,true]<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.box{
		margin: 100px;
	}
	li{
		position: relative;
		float: left;
		width: 50px;
		height: 50px;
		margin-right: 100px;
	}
	span{
		width: 100px;
		height: 100px;
		margin: 12px;
		display: block;
		border-radius: 50%;
		background: -webkit-linear-gradient(red, blue);
		transition:1s all ease;
	}
	li:hover span{
		transform:rotateZ(360deg);
	}

	@keyframes warn {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}
		20% {
			transform: scale(1);
			opacity: 0.6;
		}
		40% {
			transform: scale(1.2);
			opacity: 0.4;
		}
		60% {
			transform: scale(1.4);
			opacity: 0.2;
		}
		80% {
			transform: scale(1.6);
			opacity: 0.1;
		}
		100% {
			transform: scale(1.8);
			opacity: 0.0;
		}
	}
	a:before{
		border: 12px solid #A8E957;
	    content:‘‘;
		position: absolute;
		
		width: 100px; 
		height: 100px;
		border-radius: 62px;
		opacity: 0;
	}
	li:hover a:before{animation: warn 1s ease-out infinite;}
	</style>
</head>
<body>
<div class="box">
	<ul>
		<li>
			<a href="http://www.mamicode.com/#">
				<span></span>
			</a>
		</li>
		<li>
			<a href="http://www.mamicode.com/#">
				<span></span>
			</a>
		</li>
		<li>
			<a href="http://www.mamicode.com/#">
				<span></span>
			</a>
		</li>
		<li>
			<a href="http://www.mamicode.com/#">
				<span></span>
			</a>
		</li>
	</ul>

</div>
	
</body>
</html>

鼠标移入时闪闪发光的效果


联系
我们