人靠衣装,机靠壳装

CSS3鼠标悬停图片动画

2018-09-14 11:20 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

CSS3鼠标悬停图片动画_niuqiqi141101.jpg


使用CSS transform和transition来制作鼠标悬停在图片上时的动画效果

 使用方法

在页面中引入bootstrap.min.css和font-awesome.min.css文件。

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />        
<link href="font-awesome.min.css" rel="stylesheet" type="text/css" />


HTML结构

在页面中创建下面的HTML来展示图片。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/img-1.jpg" alt="">
                <div class="box-content">
                    <h3 class="title">Williamson</h3>
                    <span class="post">Web Developer</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/img-2.jpg" alt="">
                <div class="box-content">
                    <h3 class="title">Kristiana</h3>
                    <span class="post">Web Designer</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/img-3.jpg" alt="">
                <div class="box-content">
                    <h3 class="title">Steve Thomas</h3>
                    <span class="post">Web Developer</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码