今天带给大家一篇自己翻译的文章，3个简单的hover动效效果，初次翻译有不对的地方大家多多见谅。
现代网络中，很多技术形式可以实现有趣的动效，但最简单优雅的通常是CSS，特别是新增加的CSS3。
过去，我们不得不依靠JavaScript实现动效，但由于跨浏览器支持CSS3不断地升级，现在我们可以不通过任何脚本实现。但是很悲催，仍然有浏览器（IE9以下）不支持CSS3，所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。
今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。
如果你需要示例代码，点击这里下载文件。
Demo 1
我们看下Deme 1最简单的效果，鼠标滑过，图片会从右侧飞出显示标题文字。
标记部分
我们的第一个演示的HTML中我们将使用一个无序列表，然后将标题里面的图像。请注意，我们也会在无序列表标签添加类demo-1和效果。标记看起来像这样：
我们第一个DEMO中,html部分会使用无序列表标记图像和文字。我们在标签中使用了class类“demo-1”、“effect”。如下：
<ul class="demo-1 effect"><li>
<h2>
This is a cool title!
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nost.
</p>
</li>
<li>
<img class="top" src="images/image1.jpg" alt="" />
</li>
</ul>
CSS样式部分
CSS部分，我们设置“relative”定位“demo-1”并且设置宽高。我们通常隐藏溢出部分。除了图片外，也需要给“h2”和“p”标签等添加一些基础样式。我们给动效class添加绝对定位并且添加上下-15px外补丁；使用CSS3的“transition”创建平滑动效，如下:
.demo-1 {position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-1 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-1 h2 {
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;
}
.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}
Demo 2
第二个demo展示图片向下滑动. 这样意味着当你鼠标划过图片时候，文字标题会从上边展示。
标记部分
这个demo的html部分, 和第一个demo非常类似. 这次我们使用“demo-2”并且添加“zero”class:
<ul class="demo-2 effect"><li>
<h2 class="zero">
This is a cool title!
</h2>
<p class="zero">
Lorem ipsum dolor sit amet.
</p>
</li>
<li>
<img class="top" src="images/image1.jpg" alt="" />
</li>
</ul>
CSS样式部分
CSS部分依然和第一个demo类似, 除了设置bottom属性的值-96px.依然使用CSS3的“transition”创建平滑动效
.demo-2 {position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
Demo 3
最后一个demo,我们添加一个卡片翻转动效. 意味着鼠标滑过图片的时候，它会自动旋转并且显示描述部分。
标记部分
最后一个demo,我们使用不同的结构. 首先我们使用HTML5的“figure”元素,并且在内部添加“figcaption”标签. 在列表中使用“demo-3”class:
<ul class="demo-1 effect"><li>
<h2>
This is a cool title!
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nost.
</p>
</li>
<li>
<img class="top" src="images/image1.jpg" alt="3个有趣的css鼠标hover动效" alt=""
/>
</li>
</ul>
CSS样式部分
CSS中, 给figure添加“relative”定位;并且隐藏“backface-visibility”. 给“figcaption”设置“transform”属性“rotateY”的值 -180 deg；并且鼠标滑过图片时候转换成180 deg：
.demo-3 {position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
原文地址：http://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/
翻译：@DYstyle
转载请注明出处https://dyartstyle.com/?p=963。
文章评论