CSS 5种非常炫目的Hover效果。跳转，放大，旋转，淡入，悬停

LiteOS Studio的图形化调试功能是物联网工作者必不可少的！ >>>

为平原带来活力

悬停效果可以为网页添加一些动态效果，并使网站更具动态性。最初的方法是使用javascript来实现这些动态效果，但是随着CSS3的引入以及现代浏览器的支持，我们可以使用纯CSS代码来实现这些有趣的效果。所谓的现代浏览器更多地指的是以Mozilla和Webkit为核心的浏览器。 IE的性能略有欠佳，因此请使用FireFox，Safari或Chrome来检查效果。这里介绍了5种非常酷的纯CSS悬停效果。

跳起来

此效果非常适合页面上水平排行的场景，将鼠标悬停时会产生类似波浪的效果。

此效果的实现非常简单，并且有很多方法可以实现它。核心实现方法如下：首先为所有图片设置合并，并在悬停时降低相应图片的合并值，以达到向上跳跃的效果。

此效果不仅可以应用于图片，还可以应用于一般的水平导航栏。

效果上的透明度不是必需的。不设置透明度属性将不会影响悬停期间的跳跃效果。添加透明度只是为了使效果更平滑。

CSS代码：

.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;  
}

观看演示

堆叠和放大

此效果类似于熔岩灯效果。鼠标从上到下移动时，每张图片都会缓慢放大，然后恢复到原始状态。

为达到此效果，请在显示原始图片时先减小其尺寸，然后将鼠标悬停时再放大该图片的尺寸。

因为图片显示在中央，所以当鼠标悬停时，图片的边距也会增加，因此图片在放大时也会居中。

CSS代码

/*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;  
   
   }

观看演示

文本淡入

类似的效果通常由JavaScript实现。当一个元素悬停时，另一元素发生一些变化。为了在此示例中实现此效果，首先将图片和文本放在div中，然后设置div的颜色：transparent和line-height：0px。悬停时，更改color和line-height属性以显示文本。

CSS代码

#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;  
   }

观看演示

旋转图片

实现这种效果非常容易，但是因为它是非常重要的效果，尤其是对于图库中的缩略图。为此，我们使用了一些较新的CSS样式。本示例使用框阴影，过渡和变换。变换是为了实现旋转部分，而过渡是为了使效果更平滑。

CSS代码

#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);  
   }

观看演示

淡入和反思

此效果是一个相对复杂的效果。首先，设置要降低的图像初始透明度。悬停时，将透明度设置回默认值。此外，图像边缘上会有发光效果和反射效果（仅在内核浏览器的Webkit Works中）。

如果您不了解反射效果，可以参考本文（带CSS的图像反射）

CSS代码

#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); 
   }

观看演示

摘要

经过测试，这些效果在以Webkit为中心的浏览器中效果最佳，其次是Mozilla，而IE则最差。如果要使IE9中的效果更好，则需要其他第三方JS库。以上五个纯CSS悬停效果应该为您带来一些设计灵感。您可以全面使用这些CSS样式，并添加其他一些CSS来产​​生一些有趣的效果。如果您还有一些很酷的CSS效果，欢迎参加讨论。

编辑注释

以上五个CSS Hover效果均适用最新的CSS3效果。在现代浏览器中，应用这些CSS可以显示出非常漂亮的效果。值得一提的是IE9，IE9不支持转场和变换这两种效果，这使得这5种效果在IE9下表现不佳，因此希望IE10。

过度滚动效果

观看演示

.trans_list {
    width: 10%;
    height: 64px;
    margin:10px 0;
    background-color:#486AAA;
    color:#fff;
    text-align:center;
}
.ease {
    ...
    transition: all 4s ease;
}
.ease_in{
    ...
    transition: all 4s ease-in;
}
    .
    .
    .
.trans_box:hover{
    margin-left:89%;
    background-color:#BECEEB;
    color:#333;
    ...
    border-radius:25px;        
    ...
    transform: rotate(360deg);        		
}
HTML代码：

    
ease
    
ease-in
    
ease-out
    
ease-in-out
    
linear

标签悬浮效果

.hover-shadow{
    transition: all .3s ease;//延时效果
}
.hover-shadow:hover {
    box-shadow: 0 2px 20px rgba(0,0,0,.2) //阴影做的悬浮效果
}

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-342842-1.html