图片/图形

CSS3鼠标悬停图片动画特效

创客主机


这是一款CSS3鼠标悬停图片动画特效。该特效共5种效果,它们在鼠标悬停在图片上方时,通过CSS3 transition和transform来制作遮罩层和文字的动画效果。

使用方法:

在页面中引入material-icons.min.css和style.css文件。

  1. <link href="css/material-icons.min.css" rel="stylesheet">  
  2. <link href="css/style.css" rel="stylesheet">

HTML代码:

基本HTML结构如下:

  1. <div class="portfolio-item portfolio-effect__item portfolio-item--eff2">
  2.   <img class="portfolio-item__image" src="eff-5.jpg" alt="Portfolio Item" width="826" height="551">
  3.   <div class="portfolio-item__info">
  4.     <h3 class="portfolio-item__header">Web Development</h3>
  5.     <div class="portfolio-item__links">
  6.       <div class="portfolio-item__link-block">
  7.         <a class="portfolio-item__link" href="#" title="Link Title">
  8.           <i class="material-icons">link</i>
  9.         </a>
  10.       </div>
  11.  
  12.       <div class="portfolio-item__link-block">
  13.         <a class="portfolio-item__link" href="#" title="Link Title">
  14.           <i class="material-icons">search</i>
  15.         </a>
  16.       </div>
  17.     </div>
  18.   </div>
  19. </div>

github网址:https://github.com/eisenfox/portfolio-hovers-css3

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!