关于html5:相册画廊

5次阅读

共计 1155 个字符，预计需要花费 3 分钟才能阅读完成。

代码来自头条号 ” 前端小智 ”, 侵权删

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container{
      width: 1100px;
      display: flex;
      justify-content: space-between;
    }
    img{
      width: 350px;
      height: 350px;
      transform-origin: center;
      /*perspective 属性定义 3D 元素距视图的间隔，以像素计。该属性容许您扭转 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身 */
      transform: perspective(800px) rotateY(20deg);
      transition: .5s;
      -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004); /* 倒影 */
    }
    .container:hover img {opacity: 0.1;}

    .container img:hover{transform:perspective(800px) rotateY(0deg);
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
</body>

</html>

正文完