新7款HTML5/CSS3特效之图片扇形展开

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>新7款HTML5/CSS3特效之图片扇形展开
		</title>
		<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.6.1.min.js">
		</script>
	</head>
	<body>
		<div id="page_wrap"> 
			
			<div class="image_stack" style="margin-left:600px">
				<img id="photo1" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e511e30fd22.jpg"  >
				<img  id="photo2" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e51207283fd.jpg" >
				<img   id="photo3" class="stackphotos"  src="//ku.shouce.ren/files/images/201603/56e51217e0903.jpg" > 
			</div>
			
			<div class="image_stack" style="margin-left:300px">
				<img id="photo1" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e511e30fd22.jpg"  >
				<img id="photo3" class="stackphotos"  src="//ku.shouce.ren/files/images/201603/56e51217e0903.jpg" > 
				<img  id="photo2" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e51207283fd.jpg" >
			</div>
			<div class="single_photo">
				<ul id="pics">
					<li>
						<a href="#pic1" title="Photo">
							<img src="//ku.shouce.ren/files/images/201603/56e511e30fd22.jpg" alt="picture">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>新7款HTML5/CSS3特效之图片扇形展开
        </title>
        <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.6.1.min.js">
        </script>
    </head>
    <body>
        <div id="page_wrap"> 
            <!--Stack 1  -->
            <div class="image_stack" style="margin-left:600px">
                <img id="photo1" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e511e30fd22.jpg"  >
                <img  id="photo2" class="stackphotos" src="//ku.shouce.ren/files/images/201603/56e51207283fd.jpg" >

CSS代码

复制格式化注释注释颜色清空

放大

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
#page_wrap {
  border: 1px solid #DDDDDD;
  width: 990px;
  height:300px;
  margin-left: auto;
  margin-right: auto;
  margin-top:50px;
}
.image_stack img {
  /* css style for photo stack */
  border: none;
  text-decoration: none;
  position: absolute;
  margin-left:0px;
  width: 158px;
  height: 158px;
}
.image_stack {
  /* css style for photo stack */
  width: 400px;
  position: absolute;
  margin:60px 10px 10px;
}
.image_stack img {
  /* css style for photo stack */
  position: absolute;
  border: 4px solid #FFF;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  /* Firefox */
  -moz-transition: all 0.2s ease;
  /* WebKit */
  -webkit-transition: all 0.2s ease;
  /* Opera */
  -o-transition: all 0.2s ease;
  /* Standard */
  transition: all 0.2s ease;
}
.image_stack #photo1 {
  /* position of last photo in the stack */
  top: 8px;
  left: 108px;
}
.image_stack #photo2 {
  /* position of middle photo in the stack */
  top: 6px;
  left: 104px;
}
.image_stack #photo3 {
  /* position of first photo at the top in the stack */
  top: 4px;
  left: 100px;
  right: 100px;
}
.image_stack .rotate1 {
  /* rotate last image 15 degrees to the right */
  -webkit-transform: rotate(15deg);
  /* safari and chrome */
  -moz-transform: rotate(15deg);
  /*firefox browsers */
  transform: rotate(15deg);
  /*other */
  -ms-transform:rotate(15deg);
  /* Internet Explorer 9 */
  -o-transform:rotate(15deg);
  /* Opera */
}
.image_stack .rotate2 {
  /* css not used*/
  -webkit-transform: rotate(0deg);
  /* safari and chrome */
  -moz-transform: rotate(0deg);
  /*firefox browsers */
  transform: rotate(0deg);
  /*other */
  -ms-transform:rotate(0deg);
  /* Internet Explorer 9 */
  -o-transform:rotate(0deg);
  /* Opera */
}
.image_stack .rotate3 {
  /*rotate first image 15 degrees to the left*/
  -webkit-transform: rotate(-15deg);
  /* safari and chrome */
  -moz-transform: rotate(-15deg);
  /*firefox browsers */
  transform: rotate(-15deg);
  /*other */
  -ms-transform:rotate(-15deg);
  /* Internet Explorer 9 */
  -o-transform:rotate(-15deg);
  /* Opera */
  cursor: pointer;
}
ul#pics li {
  /*css style for the single photo only **/
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 1px 1px 1px #999999;
  display: inline-block;
  width: 153px;
  height:157px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
ul#pics li img {
  /*css style for the single photo only **/
  width: 150px;
  height:150px;
  display: block;
}
ul#pics li:hover {
  /*css style for the single photo only **/
  -moz-transform: scale(1.1) rotate(0deg);
  -webkit-transform: scale(1.1) rotate(0deg);
  -o-transform: scale(1.1) rotate(0deg);
  -ms-transform: scale(1.1) rotate(0deg);
  transform: scale(1.1) rotate(0deg);
}
.single_photo {
  /*css style for the single photo only **/
  margin-top : 80px;
  margin-left:100px;
  margin-top:65px;
}
h3 {
  margin:25px;
}
a, a:visited, a:hover {
  color: #54A6DE;
  outline: medium none;
  text-decoration: none;
}
#footer {
  /* demo footer text */
  font-size:9px;
  margin-top:300px;
  margin-left: 250px;
  color: #888888;
}
#text {
  margin-top:10px;
  margin-left:10px;
  color: #DD4B39;
  font-type: arial, sans-serif;
  font-size:17px;
}

xxxxxxxxxx
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}

JS代码

复制格式化注释注释清空

放大

$(document).ready(function() {
  $(".image_stack").delegate('img', 'mouseenter', function() {
    //when user hover mouse on image with div id=stackphotos 
    if ($(this).hasClass('stackphotos')) {
      //
      // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only 
      var $parent = $(this).parent();
      $parent.find('img#photo1').addClass('rotate1');
      //add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
      $parent.find('img#photo2').addClass('rotate2');
      $parent.find('img#photo3').addClass('rotate3');
      $parent.find('img#photo1').css("left","150px");
      // reposition the first and last image 
      $parent.find('img#photo3').css("left","50px");
    }
  }
                            )
    .delegate('img', 'mouseleave', function() {
    // when user removes cursor from the image stack
    $('img#photo1').removeClass('rotate1');
    // remove the css class that was previously added to make it to its original position
    $('img#photo2').removeClass('rotate2');
    $('img#photo3').removeClass('rotate3');
    $('img#photo1').css("left","");
    // remove the css property 'left' value from the dom
    $('img#photo3').css("left","");
  }
             );;
}
                 );

xxxxxxxxxx
 
$(document).ready(function() {
  $(".image_stack").delegate('img', 'mouseenter', function() {
    //when user hover mouse on image with div id=stackphotos 
    if ($(this).hasClass('stackphotos')) {
      //
      // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only 
      var $parent = $(this).parent();
      $parent.find('img#photo1').addClass('rotate1');
      //add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
      $parent.find('img#photo2').addClass('rotate2');
      $parent.find('img#photo3').addClass('rotate3');
      $parent.find('img#photo1').css("left","150px");
      // reposition the first and last image 
      $parent.find('img#photo3').css("left","50px");
    }
  }
                            )
    .delegate('img', 'mouseleave', function() {
    // when user removes cursor from the image stack
    $('img#photo1').removeClass('rotate1');
    // remove the css class that was previously added to make it to its original position
    $('img#photo2').removeClass('rotate2');
    $('img#photo3').removeClass('rotate3');
    $('img#photo1').css("left","");
    // remove the css property 'left' value from the dom
    $('img#photo3').css("left","");
  }
             );;
}
                 );
​

运行代码

简介

请输入代码名称！

名称

新7款HTML5/CSS3特效之图片扇形展开

分类

图片代码

描述

今天要分享的这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。