Question

我为图像创建了一个遮罩。当我将鼠标悬停在图像上的鼠标上时，掩码会显示但是当鼠标出现时它会突然消失然后慢慢消失。我想要像This效果这样的东西。这是我的Jsfiddle

我的代码是......

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
        <link rel="stylesheet" href="css/bootstrap.css"/>

    <style>
        .top
        {
            margin-top: 200px;
        }
        .top div
        {
            padding:0px;
            margin: 0px;
        }
        img
        {
            width: 100%;
            height: 400px;
            padding: 0px;
            margin: 0px;
            -webkit-transition: margin 1s ease;
            -moz-transition: margin 1s ease;
            -o-transition: margin 1s ease;
            -ms-transition: margin 1s ease;
            transition: margin 1s ease;

        }



.blog-post:hover img

        {

          margin-left: 100px;
        }

.blog-post
{
    border: 1px solid #c0c0c0;
    float: left;
    overflow: hidden;

}

.mask
{

    top: 0;
    left:0;
    padding: 0;
    position: absolute;
    display: inline-block;
    overflow: hidden;
    visibility: hidden;
    width: 250px;
    height: 100%;
    border: 1px solid #ff1493;
    -webkit-transition: all 0.5 ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.5s ease-in-out;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
    transition: transform 0.4s, opacity 0.2s 0.4s;
    background: #ff1493;


}
.mask h4
{
    text-align: center;
}
  .blog-post:hover .mask
        {
            visibility: visible;
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg);
      -webkit-transition: -webkit-transform 1s, opacity 0.2s;
      -moz-transition: -moz-transform 1s, opacity 1.2s;
      transition: transform 1s, opacity 0.2s;


  }



    </style>
       </head>
<body>

<div class="container col-md-12 top">
    <div class="col-md-4">

    <div class="blog-post">

        <img src="image/Msz.jpg"  alt=""/>
        <div class="mask clearfix">
            <h4>Post title</h4>
        </div>

    </div>


</div>



<script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/bootstrap.js"></script>
    <script>

    </script>
<script></script>
</body>
</html>

我想要当鼠标离开图像时它会慢慢消失而不是快速消失。

Answer 1

要实现链接网站中提到的效果，需要做一些事情，它们如下：

当转换应在悬停和悬停时顺利进行时，应在基本元素（而不是transition选择器）上设置:hover属性。如果在:hover选择器上设置了转换，则会突然发生悬停。
链接网站中元内容的旋转发生在元div左边缘的原点上，并且还会发生一些透视。所以这两个都需要添加到您的代码中。虽然您已经设置了transform-origin，但需要修改这些值。

＆＃13;

.top {
  margin-top: 200px;
}
.top div {
  padding: 0px;
  margin: 0px;
}
img {
  width: 100%;
  height: 400px;
  padding: 0px;
  margin: 0px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: margin 1s ease;
}
.blog-post:hover img {
  margin-left: 100px;
}
.blog-post {
  border: 1px solid #c0c0c0;
  float: left;
  position: relative;
}
.mask {
  top: 0;
  left: 0;
  padding: 0;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  width: 250px;
  height: 400px;
  border: 1px solid #ff1493;
  -moz-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: perspective(1500px) rotateY(-90deg);
  -moz-transform: perspective(1500px) rotateY(-90deg);
  transform: perspective(1500px) rotateY(-90deg);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  background: #ff1493;
}
.mask h4 {
  text-align: center;
}
.blog-post:hover .mask {
  -webkit-transform: perspective(1500px) rotateY(0deg);
  -moz-transform: perspective(1500px) rotateY(0deg);
  transform: perspective(1500px) rotateY(0deg);
}

＆＃13;

<div class="container col-md-12 top">
  <div class="col-md-4">
    <div class="blog-post">
      <img src="http://stylonica.com/wp-content/uploads/2014/02/Free-Wallpaper-Nature-Scenes.jpg" alt="" />
      <div class="mask clearfix">
        <h4>Post title</h4>

      </div>
    </div>
  </div>

＆＃13;

Answer 2

试试这个css

blog-post
    {
        float: left;
        width: 100%;
        position: relative;
        display: block;
        -webkit-perspective: 1700px;
        -moz-perspective: 1700px;
        perspective: 1700px;
        -webkit-perspective-origin: 0 50%;
        -moz-perspective-origin: 0 50%;
        perspective-origin: 0 50%;

    }

    .mask
    {

        top: 0;
        left:0;
        padding: 0;
        position: absolute;
        display: inline-block;
        overflow: hidden;
        height: 100%;
        background-color:#ff1493;
        z-index: 10;
        text-align: center;
        width: 50%;
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
        -moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
        transition: transform 0.4s, opacity 0.2s 0.4s;



    }
    .mask h4
    {
        text-align: center;
    }
      .blog-post:hover .mask
            {

          opacity: 1;
          -webkit-transform: rotateY(0deg);
          -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
          -webkit-transition: -webkit-transform 1s, opacity 0.2s;
          -moz-transition: -moz-transform 1s, opacity 1.2s;
          transition: transform 1s, opacity 0.2s;
          text-align: center;
      }

css3过渡缓和了

2 个答案: