<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3动画相册DEMO演示</title>
<style type="text/css">
body {
background: #72C2E7;
text-align: center;
}
h1 {
color: #FBF6FD;
font-size: 60px;
text-shadow: #272229 2px 2px 4px;
}
#gallery {
border: 10px solid #1D0C16;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #272229;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/* box shadow effect in Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/* box shadow effect in IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow: #272229 10px 10px 20px;
}
#gallery ul{
/* This position the ul content in the middle of the gallery*/
margin-left:-30px;
}
#gallery ul li {
/* In order to create the proper effect with hover we should use display inline-table
This will display the big picture right next to its thumbnail
*/
list-style:none; display:inline-table; padding:10px;
}
/* This is the pic to display when the hover action occur over the li that contains the thumbnail */
#gallery ul li .pic{
/* Animation with transition in Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The the opacity to 0 to create the fadeOut effect*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}
#gallery ul li .mini:hover{
cursor:pointer;
}
/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
/* width and height is how much the picture is going to growth with the effect */
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div id="gallery">
<ul>
<li>
<img src="images/imagen1_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen1.jpg" class="pic" />
</li>
<li>
<img src="images/imagen2_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen2.jpg" class="pic" />
</li>
<li>
<img src="images/imagen3_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen3.jpg" class="pic" />
</li>
<li>
<img src="images/imagen4_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen4.jpg" class="pic" />
</li>
<li>
<img src="images/imagen5_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen5.jpg" class="pic" />
</li>
<li>
<img src="images/imagen6_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen6.jpg" class="pic" />
</li>
<li>
<img src="images/imagen7_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen7.jpg" class="pic" />
</li>
<li>
<img src="images/imagen8_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen8.jpg" class="pic" />
</li>
<li>
<img src="images/imagen9_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen9.jpg" class="pic" />
</li>
<li>
<img src="images/imagen10_small.jpg" class="mini" width="100" height="100" /><img src="images/imagen10.jpg" class="pic" />
</li>
<li>
<img src="images/imagen11_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen11.jpg" class="pic" />
</li>
<li>
<img src="images/imagen12_small.jpg" class="mini" width="100" height="100" alt="" /><img src="images/imagen12.jpg" class="pic" />
</li>
</ul>
</div>
</body>
</html>
CSS3动画相册 图片淡入淡出动画效果
需积分: 6 141 浏览量
2016-01-03
19:09:22
上传
评论
收藏 485KB RAR 举报
css3-animated-gallery.rar （26个子文件） 
css3-animated-gallery 
index.html 7KB images 
imagen7.jpg 12KB imagen12.jpg 20KB imagen8.jpg 14KB imagen4_small.jpg 25KB imagen5.jpg 10KB imagen10_small.jpg 7KB imagen9_small.jpg 4KB imagen2_small.jpg 23KB model.jpg 65KB imagen11_small.jpg 4KB imagen11.jpg 12KB imagen4.jpg 59KB imagen12_small.jpg 6KB imagen9.jpg 11KB imagen1.jpg 65KB imagen7_small.jpg 20KB imagen3.jpg 34KB imagen2.jpg 52KB imagen10.jpg 19KB imagen3_small.jpg 17KB imagen8_small.jpg 23KB imagen6.jpg 15KB imagen6_small.jpg 23KB imagen1_small.jpg 26KB imagen5_small.jpg 20KB
评论0
最新资源