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

  • A+
所属分类:DIV+CSS

这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。

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

在线演示

9种CSS3炫酷图片预览展示动画特效.zip

HTML结构

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

    <div class="albums"></div>   

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

    <div class="albums-tab">
      <div class="albums-tab-thumb sim-anim-1">
        <img src="_assets/studio_0001.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0002.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0003.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0004.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0005.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0006.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
        <img src="_assets/studio_0001.jpg" alt="9种CSS3炫酷图片预览展示动画特效" class="all studio"/>
      </div>
      <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
    </div>   

复制代码
CSS样式

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

    .albums-tab-thumb{
      float: left;
      width: 300px;
    }      

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

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

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

    .sim-anim-1{
      position: relative;
    }
    .sim-anim-1 img{
      position: absolute;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
    }
    .sim-anim-1:hover img{
      z-index: 1;
    }   

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

    .sim-anim-1:hover img:nth-child(1){
       -ms-transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    .sim-anim-1:hover img:nth-child(2){
       -ms-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .sim-anim-1:hover img:nth-child(3){
      -ms-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);}
    .sim-anim-1:hover img:nth-child(4){
       -ms-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    .sim-anim-1:hover img:nth-child(5){
       -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .sim-anim-1:hover img:nth-child(6){
       -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    .sim-anim-1:hover img:nth-child(7){
        -ms-transform: scale(0.9,0.9);
        -webkit-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
    }         

复制代码 如何在自己的项目上使用这IE图片展示效果?

如果你想将这9中图片预览展示特效中的一种用于你的项目上,你需要引入sim-prev-anim.css文件,然后为你的图片包裹容器设置合适的名称,如果名称与sim-prev-anim.css中的名称不同,需要修改css文件,然后添加合适数量的图片,和选择一种你需要的动画效果的class名称添加到albums-tab-thumb元素上。

注意:每种效果的图片数量是固定的,数量不对显示出来的效果会不太美观。

via:http://www.htmleaf.com/css3/css3donghua/201503071476.html

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: