图片/图形

超酷CSS3相册照片墙动画特效

阿里云


使用 CSS3 transform 属性制作的炫酷相册照片墙动画特效。该照片墙特效将一组图片旋转打乱排放在屏幕中,鼠标滑过照片时,照片会动画旋转并现在在所有照片的最上方。

HTML 结构

该相册照片墙特效使用下面的 HTML 结构。

也想出现在这里?联系我们
创客主机
  1. <div class="container">
  2.   <img src="img/mm1.jpg" class="pic1"  />
  3.   <img src="img/mm2.jpg" class="pic2"  />
  4.   <img src="img/mm3.jpg" class="pic3"  />
  5.   <img src="img/mm4.jpg" class="pic4"  />
  6.   <img src="img/mm5.jpg" class="pic5"  />
  7.   <img src="img/mm6.jpg" class="pic6"  />
  8.   <img src="img/mm7.jpg" class="pic7"  />
  9.   <img src="img/mm8.jpg" class="pic8"  />
  10.   <img src="img/mm9.jpg" class="pic9"  />
  11.   <img src="img/mm10.jpg" class="pic10"  />
  12. </div>

CSS 样式

实现照片墙旋转和鼠标滑过动画的 CSS 代码如下:

  1. .container{width:960px;height:450px;margin:60px auto;position:relative;}
  2. .container img{position:absolute;padding:10px 10px 15px;background:#fff;border:1px solid #ddd;-webkit-transition:1s ;-moz-transition:1s ;transition:1s ;z-index:1;}
  3. .container img:hover{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:5px 5px 5px #ddd;z-index:2;cursor:pointer;}
  4. .pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
  5. .pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
  6. .pic3{bottom:0;right:0;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
  7. .pic4{bottom:0;left:300px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
  8. .pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
  9. .pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
  10. .pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
  11. .pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
  12. .pic9{top:90px;left:550px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
  13. .pic10{left:180px;top:20px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}

超酷 CSS3 相册照片墙动画特效

已有 671 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!