<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
width:90%;
margin:100px auto 0;
font-size:0;
}
section a{
display:inline-block;
width:30%;
position:relative;
margin:0 1.6% 3%;
overflow:hidden;
}
section img{
width:100%;
}
section a:before{
content:'';
width:700px;
height:700px;
border:500px #0C0000 solid;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
opacity:0.8;
transition:all 0.5s linear;
}
section a:hover:before{
width:0;
height:0;
}
section a:after{
content:'view all work';
font:24px/24px arial;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) perspective(600px) rotateY(180deg) scale(5);
width:100%;
text-align:center;
color:#fff;
opacity:0;
transition:all 1s linear;
}
section a:hover:after{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) perspective(600px) rotateY(360deg) scale(1);
opacity:1;
}
</style>
</head>
<body>
<section>
<a href="#"><img src="images/pic1.jpg"/></a>
<a href="#"><img src="images/pic2.jpg"/></a>
<a href="#"><img src="images/pic3.jpg"/></a>
<a href="#"><img src="images/pic4.jpg"/></a>
<a href="#"><img src="images/pic5.jpg"/></a>
<a href="#"><img src="images/pic6.jpg"/></a>
</section>
</body>
</html>
CSS :after伪类实现圆形蒙板动画,翻转
最新推荐文章于 2024-09-04 09:00:00 发布