Heim > Web-Frontend > HTML-Tutorial > 12种炫酷的CSS3鼠标滑过图片遮罩层动画特效_html/css_WEB-ITnose

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:34:25
Original
1008 Leute haben es durchsucht

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不同的鼠标滑过图片效果,分为滑动、旋转和翻转3大类。它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作。

在线预览    源码下载

 使用方法

使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件。

<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />或者:<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />        
Nach dem Login kopieren

HTML结构

该CSS3鼠标滑过图片遮罩层动画特效的基本HTML结构如下:

<div class="pic">    <img src="img/01.jpg" class="pic-image" alt="Pic"/>    <span class="pic-caption bottom-to-top">        <h1 class="pic-title">Pic Title</h1>        <p>图片描述文本</p>    </span></div>        
Nach dem Login kopieren

.bottom-to-top是遮罩层的动画效果类。

 可用的动画效果

该CSS3鼠标滑过图片遮罩层动画特效有以下12种可用的CSS3动画效果。

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage