Heim  >  Artikel  >  Web-Frontend  >  8组超炫酷纯CSS3鼠标滑过图片动画效果_html/css_WEB-ITnose

8组超炫酷纯CSS3鼠标滑过图片动画效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:24:031229Durchsuche

这是一款效果超酷的纯CSS3鼠标滑过图片动画效果,它共分为8组不同的效果,它们分别在鼠标滑过图片时,以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的,分别有:滑动效果,倾斜效果,翻转效果,旋转效果等等,下面是一张GIF的预览图片。

在线预览    源码下载

 使用方法

在页面中引入hover-effects.css文件。

<link rel="stylesheet" href="css/hover-effects.css" />            

 HTML结构

以其中一种鼠标滑过图片动画效果为例,它的HTML结构如下:

<div class="effect-1">   <div class="image-box">      <img src="img-2.jpg" alt="Image-3">   </div>   <div class="text-desc">      <h3>Your Title</h3>      <p>......</p>      <a href="#" class="btn">Learn more</a>   </div></div>             

 CSS样式

.effect-1{  float: left;   width: 340px;   position: relative;   overflow: hidden;   text-align: center;   border: 4px solid rgba(255, 255, 255, 0.9);   overflow: visible;}.effect-1 img{  transition: 0.5s;}.effect-1:hover img{  transform: scale(0.3) translateY(-110%);  position: relative;   z-index: 9;} .effect-1 .text-desc{  transform: translateY(100%);   opacity: 0;   padding: 85px 20px 10px;   transition: 0.5s;} .effect-1:hover .text-desc{  transform: translateY(0px);   opacity: 1;}                  

其它效果的CSS3实现代码请参考hover-effects.css文件。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn