3个有趣的css鼠标hover动效

2015年6月16日 0条评论 6,641次阅读 1人点赞

吾爱淘 - 淘宝优惠券 - 每天千款优惠券秒杀，一折限时疯抢！_优惠淘

今天带给大家一篇自己翻译的文章，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)

}