图片/图形

CSS3炫酷图片预览展示动画特效

阿里云


这是一组共 9 款 CSS3 炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以 9 种不同的方式展开,有扇形、平面展开等等非常酷的效果。css 的新特性可以让我们制作出各种炫酷的动画效果。该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以 9 种不同的方式展开,有扇形、平面展开等等非常酷的效果。

HTML 结构

下面来看看这个图片预览展示动画特效的 HTML 结构。整个结构使用一个 div.albums 作为包装容器。它的宽度被设置为 1100 像素。

也想出现在这里?联系我们
创客主机
  1. <div class="albums"></div>

在.albums 中有 9 个.albums-tab,分别用于制作 9 种图片展开效果。在它里面有两个元素:.albums-tab-thumb 和.albums-tab-text,分别是用于放置图片和图片的标题。

  1. <div class="albums-tab">
  2.   <div class="albums-tab-thumb sim-anim-1">
  3.     <img src="_assets/studio_0001.jpg" class="all studio"/>
  4.     <img src="_assets/studio_0002.jpg" class="all studio"/>
  5.     <img src="_assets/studio_0003.jpg" class="all studio"/>
  6.     <img src="_assets/studio_0004.jpg" class="all studio"/>
  7.     <img src="_assets/studio_0005.jpg" class="all studio"/>
  8.     <img src="_assets/studio_0006.jpg" class="all studio"/>
  9.     <img src="_assets/studio_0001.jpg" class="all studio"/>
  10.   </div>
  11.   <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
  12. </div>

CSS 样式

这个图片预览展示动画特效有两个主要的样式表:main.css 和 sim-prev-anim.css。main.css 用于一些通用样式,sim-prev-anim.css 包含了 9 种图片预览展示动画特效的 CSS 代码。为了制作动画效果,.albums-tab-thumb 元素要设置一个合适的宽度,记住最终设置的宽度要比这个宽度大 10 像素,因为要为每一幅图设置 5 像素的 padding。

  1. .albums-tab-thumb{
  2.   float: left;
  3.   width: 300px;
  4. }

接下来要设置.albums-tab-thumb 里面的所有图片的宽度为它的宽度-10px(5px 的 padding),并将背景色设置为白色。

  1. .albums-tab-thumb img {
  2.   height: auto;
  3.   width: 290px;
  4.   background-color: rgba(255,255,255,1);
  5.   padding: 5px;   
  6. }

接下来来看看第一种效果的制作方法。第一种图片预览动画特效的 class 为.sim-anim-1。这个动画效果需要 7 张图片,.sim-anim-1 的定位方式为相对定位,它里面的图片的定位方式为绝对定位方式。为图片设置 0.5s 的 transition,当鼠标滑过.sim-anim-1 元素,它里面的图片的 z-index 被设置为 1,这样在它们执行动画的时候,都会显示在其它图片的上面。

  1. .sim-anim-1{
  2.   position: relative;
  3. }
  4. .sim-anim-1 img{
  5.   position: absolute;
  6.   -webkit-transition: all 0.5s;
  7.   -moz-transition: all 0.5s;
  8.   -o-transition: all 0.5s;
  9.   transition: all 0.5s;
  10. } 
  11. .sim-anim-1:hover img{
  12.   z-index: 1;
  13. }

为了制作第一种图片展示效果,第一幅图片要旋转 10 度,第二幅图片旋转-10 度,这样每隔一幅图片就会产生相反的方向。接下来第三幅图片旋转 20 度,第四幅图片旋转-20 度,第五和第六幅图片将旋转 30 度和-30 度。最后一幅图片的大小被缩放为原图片的 90%。

  1. .sim-anim-1:hover img:nth-child(1){
  2.    -ms-transform: rotate(10deg); 
  3.     -webkit-transform: rotate(10deg); 
  4.     transform: rotate(10deg);
  5. }
  6. .sim-anim-1:hover img:nth-child(2){
  7.    -ms-transform: rotate(-10deg); 
  8.     -webkit-transform: rotate(-10deg); 
  9.     transform: rotate(-10deg);
  10. }
  11. .sim-anim-1:hover img:nth-child(3){
  12.   -ms-transform: rotate(20deg); 
  13.     -webkit-transform: rotate(20deg); 
  14.     transform: rotate(20deg);} 
  15. .sim-anim-1:hover img:nth-child(4){
  16.    -ms-transform: rotate(-20deg); 
  17.     -webkit-transform: rotate(-20deg); 
  18.     transform: rotate(-20deg);
  19. }
  20. .sim-anim-1:hover img:nth-child(5){
  21.    -ms-transform: rotate(30deg); 
  22.     -webkit-transform: rotate(30deg); 
  23.     transform: rotate(30deg);
  24. }
  25. .sim-anim-1:hover img:nth-child(6){
  26.    -ms-transform: rotate(-30deg); 
  27.     -webkit-transform: rotate(-30deg); 
  28.     transform: rotate(-30deg);
  29. }
  30. .sim-anim-1:hover img:nth-child(7){
  31.     -ms-transform: scale(0.9,0.9); 
  32.     -webkit-transform: scale(0.9,0.9); 
  33.     transform: scale(0.9,0.9); 
  34. }

如何在自己的项目上使用这 IE 图片展示效果?如果你想将这 9 中图片预览展示特效中的一种用于你的项目上,你需要引入 sim-prev-anim.css 文件,然后为你的图片包裹容器设置合适的名称,如果名称与 sim-prev-anim.css 中的名称不同,需要修改 css 文件,然后添加合适数量的图片,和选择一种你需要的动画效果的 class 名称添加到 albums-tab-thumb 元素上。注意:每种效果的图片数量是固定的,数量不对显示出来的效果会不太美观。

CSS3 炫酷图片预览展示动画特效

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

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

发表回复

热销模板

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

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