hover显示遮罩层及border旋转

最新推荐文章于 2022-10-25 10:02:03 发布

summer_in_BJ

最新推荐文章于 2022-10-25 10:02:03 发布

阅读量562

点赞数 1

文章标签： css3动画 border旋转遮罩层

本文链接：https://blog.csdn.net/qq_29797325/article/details/51779467

版权

今天在mooc上看了个视频，正好最近会用到，自己写了一下，也防止写过之后没时间整理以后想用又找不见，找个地方存档。仅作为自己学习资料参考，如有侵权，请联系本人。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap,.img,.mask,.border{
			width: 300px; 
			height: 300px;
			border-radius: 50%;
		}
		.wrap{
			position: relative;
			display: block;
		}
		.img{
			background: url("bg.jpg") no-repeat center center;
			background-size: cover;
			background-position: 50% 50%;
		}
		.mask,.border{
			position: absolute;
			top: 0;
			left: 0;
		}
		.mask{
			text-align: center;
			color: rgba(255,255,255,0);
			transition:all 0.5s ease-in ;
		}
		.info{
			margin-top: 50%;
			transform: translateY(-50%);
		}
		.border{
			border:10px solid #072256;
			border-left-color: #e07514;
			border-top-color: #e07514;
			box-sizing: border-box;
			transition: all .5s ease-in;
		}
		.wrap:hover .mask{
			background-color: rgba(0,0,0,.5);
			color: rgba(255,255,255,1);
		}
		.wrap:hover .border{
			transform: rotate(180deg);
		}
	</style>
</head>
<body>
	<a href="#" class="wrap">
		<div class="img">
			<div class="mask">
				<div class="info">
					<h3>TITIE</h3>
					<P>desctiption here</P>
				</div>
			</div>
		</div>
		<div class="border">
			
		</div>
	</a>
</body>
</html>