HTML页面中5种超酷的伪类选择器:hover效果

想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。

给平淡的站点带来活力

hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。

向上跳跃

这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。

这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置margin，当hover时，给相应的图片减少margin的值，这样就实现了向上跳跃的效果。

这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。

效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。

CSS代码：


1

2

3

4

5

6

7

8

9

10

11

12

.ex1 img{

    border: 5px solid #ccc;

    float: left;

    margin: 15px;

    -webkit-transition: margin 0.5s ease-out;

    -moz-transition: margin 0.5s ease-out;

    -o-transition: margin 0.5s ease-out;

}

 

.ex1 img:hover {

    margin-top: 2px;

}

查看Demo

层叠与放大

这种效果类似于熔岩灯效果，当鼠标从上至下移动时，每个图片都是慢慢地放大然后恢复到原始的状态。

为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。

因为图片是居中显示的，所以当鼠标hover时，也增加了图片的margin，这样使得当图片放大时也是居中的效果。

CSS代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/*Example 2*/

#container {

    width: 300px;

    margin: 0 auto;

}

 

#ex2 img{

    height: 100px;

    width: 300px;

    margin: 15px 0;

     -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

}

 

#ex2 img:hover {

    height: 133px;

    width: 400px;

    margin-left: -50px;

}

查看Demo

文字淡入

类似的这种效果，一般是用JavaScript来实现的，当hover其中某个元素时，另一个元素发生一些变化。本例为了实现这一效果，首先把图片和文字放在一个div里，然后设置div的color：transparent和line-height:0px。当hover时，更改color和line-height属性，使得文字显示。

CSS代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

#ex3 {

    width: 730px;

    height: 133px;

    line-height: 0px;

    color: transparent;

    font-size: 50px;

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

       font-weight: 300;

    text-transform: uppercase;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

#ex3:hover {

    line-height: 133px;

    color: #575858;

}

 

#ex3 img{

    float: left;

    margin: 0 15px;

}

查看Demo

旋转的图片

实现这个效果是非常容易的，但是因为这是一个非常重要的效果，尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分，transition是为了让效果更平滑。

CSS代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

#ex4 {

    width: 800px;

    margin: 0 auto;

}

 

#ex4 img {

    margin: 20px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

#ex4 img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

}

查看Demo

淡入和倒影

这个效果是相对复杂的效果，首先，设置减少图片的初始的透明度，当hover时，把透明度设置回默认值，另外会有一个图片边缘发光的效果和倒影效果（只在以Webkit为内核的浏览器中起作用）。

如果你对倒影效果不太懂的话，可以参考这篇文章（Image Reflections with CSS）

CSS代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

#ex5 {

    width: 700px;

    margin: 0 auto;

    min-height: 300px;

}

 

#ex5 img {

    margin: 25px;

    opacity: 0.8;

    border: 10px solid #eee;

 

    /*Transition*/

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

 

    /*Reflection*/

    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

}

 

 

#ex5 img:hover { 

   opacity: 1;

 

   /*Reflection*/

  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

 

   /*Glow*/

  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

}

查看Demo

总结

经过测试，这些效果在以Webkit为核心的浏览器上表现最出色，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果，应该会给你带来一些设计上的灵感，你可以综合运用这些CSS样式，并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果，欢迎参与讨论。

编注

以上的五种CSS Hover效果都应用了最新的CSS3效果，在现代的浏览器中，应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9，IE9不支持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄希望于IE10吧。

文章编译来源（5 Cool CSS Hover Effects You Can Copy and Paste）

原文地址:https://www.cnblogs.com/powertoolsteam/archive/2011/05/10/2042142.html

原文地址：https://www.cnblogs.com/lcspring/p/10658419.html

时间： 2024-10-11 11:38:12

HTML页面中5种超酷的伪类选择器:hover效果的相关文章

Web页面中5种超酷的Hover效果

hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微 差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果.如下就是要介绍的5个非常酷的纯CSS hover 效果. 1. 向上跳跃 Click Here to Launch

Javascript中两种最通用的定义类的方法

在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定义描述为对象的配方(先看一下例子会比较容易理解).定义类的方法有很多种,这里有两中较为通用的方法,大家参考一下.这两种方法均可以解决 构造函数会重复生成函数,为每个对象都创建独立版本的函数的问题.解决了重复初始化函数和函数共享的问题??提示音:http://www.huiyi8.com/tishiy

css3中伪类选择器和伪元素介绍

利用html5和css3开发出炫酷的网页,那么对于一个web前端开发者,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素. 类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如:p.left{text-align: left}p.rigth{text-align: right} 伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 最常见的伪类选择器 a:link{ color:

CSS3中的伪类选择器详解

  类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择 最常见的伪类选择器 未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器 我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000

关于伪类选择器中一个冒号和两个冒号的区别

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. This :: notation is introduced by the current document in order to establish a discrimi

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真

如何使用CSS3中的结构伪类选择器和伪元素选择器

原文:如何使用CSS3中的结构伪类选择器和伪元素选择器 结构伪类选择器介绍# 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一个子元素. E:nth-child(n) 匹配E元素的第n个子元素. E:nth-child(2n)或者E:nth-child(even) 匹配E元素的偶数子元素. E:nth-child(2n+1)或者E:nth-child(odd) 匹配

12种超酷HTML5 SVG和CSS3浮动标签效果

这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成,一部分则使用SVG来制作变形动画. 在前面已经发表了一篇关于SVG浮动标签的文章:14种CSS3炫酷表单input输入框美化效果.这篇文章中的浮动标签效果是它的一些补充,在原来14种效果的基础上有增加了12种更加炫酷的效果. 这些效果在所有最新版的现代浏览器中都测试通过,但是可能某些旧的浏览器会不支持这些效

使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实现,相信大家一定会喜欢的! 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代