关于前端:js-transform案例

4次阅读

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="guest-item">
    <div class="img-header">
      <img alt="nanfeng" src="guest-img1.png">
      <div class="header-bg"></div>
    </div>
    <div class="text">
      <h3> 南风 </h3>
      <p> 寰球产品与规范副总裁 </p>
    </div>
  </div>

</body>
<style>
  .guest-item .img-header {
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 182px;
    height: 182px;
    cursor: pointer;
  }

  .guest-item .img-header img {
    display: inline-block;
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    margin-top: -60px;
    margin-left: -60px;
    border-radius: 100%;
    transition: all 0.5s ease-out;
  }

  .guest-item .header-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('guest-bg.png') no-repeat center top;
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    -ms-transition: -ms-transform 0.6s ease-out;
  }

  .guest-item:hover .header-bg {-webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }

  .guest-item:hover .img-header img {transform: scale(1.1);
  }

  .text {text-align: center;}
</style>

</html>

正文完