5种CSS3鼠标悬停图片动画特效代码

5种CSS3鼠标悬停图片动画特效代码

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

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

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

HTML结构
基本HTML结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="portfolio-item portfolio-effect__item portfolio-item--eff2">
  <img class="portfolio-item__image" src="eff-5.jpg" alt="Portfolio Item" width="826" height="551">
  <div class="portfolio-item__info">
    <h3 class="portfolio-item__header">Web Development</h3>
    <div class="portfolio-item__links">
      <div class="portfolio-item__link-block">
        <a class="portfolio-item__link" href="#" title="Link Title">
          <i class="material-icons">link</i>
        </a>
      </div>
       
      <div class="portfolio-item__link-block">
        <a class="portfolio-item__link" href="#" title="Link Title">
          <i class="material-icons">search</i>
        </a>
      </div>
    </div>
  </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论