<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/main.css">
<!--[if IE]>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="htmleaf-container">
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print affix-top">
<ul class="nav bs-sidenav">
<li><a href="#intro">Introduction</a></li>
<li><a href="#circle">Demo - 圆形图片</a>
<ul class="nav">
<li><a href="#circle1">Hover effect 1</a></li>
<li><a href="#circle2">Hover effect 2</a></li>
<li><a href="#circle3">Hover effect 3</a></li>
<li><a href="#circle4">Hover effect 4</a></li>
<li><a href="#circle5">Hover effect 5</a></li>
<li><a href="#circle6">Hover effect 6</a></li>
<li><a href="#circle7">Hover effect 7</a></li>
<li><a href="#circle8">Hover effect 8</a></li>
<li><a href="#circle9">Hover effect 9</a></li>
<li><a href="#circle10">Hover effect 10</a></li>
<li><a href="#circle11">Hover effect 11</a></li>
<li><a href="#circle12">Hover effect 12</a></li>
<li><a href="#circle13">Hover effect 13</a></li>
<li><a href="#circle14">Hover effect 14</a></li>
<li><a href="#circle15">Hover effect 15</a></li>
<li><a href="#circle16">Hover effect 16</a></li>
<li><a href="#circle17">Hover effect 17</a></li>
<li><a href="#circle18">Hover effect 18</a></li>
<li><a href="#circle19">Hover effect 19</a></li>
<li><a href="#circle20">Hover effect 20</a></li>
</ul>
</li>
<li><a href="#square">Demo - 矩形图片</a>
<ul class="nav">
<li><a href="#square1">Hover effect 1</a></li>
<li><a href="#square2">Hover effect 2</a></li>
<li><a href="#square3">Hover effect 3</a></li>
<li><a href="#square4">Hover effect 4</a></li>
<li><a href="#square5">Hover effect 5</a></li>
<li><a href="#square6">Hover effect 6</a></li>
<li><a href="#square7">Hover effect 7</a></li>
<li><a href="#square8">Hover effect 8</a></li>
<li><a href="#square9">Hover effect 9</a></li>
<li><a href="#square10">Hover effect 10</a></li>
<li><a href="#square11">Hover effect 11</a></li>
<li><a href="#square12">Hover effect 12</a></li>
<li><a href="#square13">Hover effect 13</a></li>
<li><a href="#square14">Hover effect 14</a></li>
<li><a href="#square15">Hover effect 15</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div role="main" class="col-md-9">
<section id="circle">
<div class="page-header">
<h1>Demo - Circle </h1>
</div>
<br>
<h3 id="circle1" class="section-heading first-child">Hover effect 1</h3>
<div class="bs-example">
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div>
</a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
</div>
</div>
</a></div>
<!-- end colored -->
</div>
</div>
</div>
<br>
<h3 id="circle2" class="section-heading first-child">Hover effect 2</h3>
<div class="bs-example">
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect2 left_to_right"><a href="#">
<div class="img"><img src="images/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 left_to_right"><a href="#">
<div class="img"><img src="images/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end colored -->
</div>
</div>
<!-- end Left to right-->
<!-- Right to left-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect2 right_to_left"><a href="#">
<div class="img"><img src="images/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 right_to_left"><a href="#">
<div class="img"><img src="images/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end colored -->
</div>
</div>
<!-- end Right to left-->
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect2 top_to_bottom"><a href="#">
<div class="img"><img src="images/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 top_to_bottom"><a href="#">
<div class="img"><img src="images/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to bottom-->
<!-- Bottom to top-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect2 bottom_to_top"><a href="#">
<div class="img"><img src="images/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
15种css3鼠标悬停图片动画过渡效果.rar
5星 · 超过95%的资源 需积分: 4 80 浏览量
2023-04-19
20:42:33
上传
评论 1
收藏 512KB RAR 举报 
15种css3鼠标悬停图片动画过渡效果.rar （15个子文件） 
15种css3鼠标悬停图片动画过渡效果 js 
app.js 196KB css main.css 355KB default.css 6KB normalize.css 2KB
output.html 105KB images 
2.jpg 41KB 10.jpg 45KB 6.jpg 44KB 1.jpg 36KB 5.jpg 33KB 8.jpg 44KB 3.jpg 41KB 7.jpg 30KB 9.jpg 37KB 4.jpg 46KB
- 1
- 2
前往页