CSS ：after伪类实现圆形蒙板动画，翻转

最新推荐文章于 2023-05-08 14:55:01 发布

jiaweimin123

最新推荐文章于 2023-05-08 14:55:01 发布

阅读量1.5k

点赞数

分类专栏： html css 文章标签：动画 class after 前端 css

本文链接：https://blog.csdn.net/jiaweimin123/article/details/78204447

版权

html 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

<!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>