我为图像创建了一个 mask 。当我将鼠标悬停在图像上时， mask 会显示，但是当鼠标移出时，它会突然消失，而不是慢慢消失。我想要类似 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>
我希望当鼠标离开图像时它会慢慢消失而不是很快。
最佳答案
要达到链接网站中提到的效果，需要做一些事情，如下所示:
transition属性应该在基本元素上设置(而不是在:hover选择器上)当过渡应该在悬停和悬停时平滑发生时。如果在:hover选择器上设置了过渡，悬停会突然发生。- 链接站点中元内容的旋转发生在元 div 左边缘的原点，并且它也发生了一点透视。所以这两个都需要添加到您的代码中。虽然您已经设置了
transform-origin，但需要修改这些值。
.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);
}<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>关于css3过渡缓和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28598374/