当前位置：首页 > 网页特效 > 图片特效

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

分类：图片特效日期：2024-05-14 点击(4) 评论(0)

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

简介

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

```html
<div class="albums"></div>    
```
在.albums中有9个.albums-tab，分别用于制作9种图片展开效果。在它里面有两个元素：.albums-tab-thumb和.albums-tab-text，分别是用于放置图片和图片的标题。

```html
<div class="albums-tab">
  <div class="albums-tab-thumb sim-anim-1">
    <img src="_assets/studio_0001.jpg" class="all studio"/>
    <img src="_assets/studio_0002.jpg" class="all studio"/>
    <img src="_assets/studio_0003.jpg" class="all studio"/>
    <img src="_assets/studio_0004.jpg" class="all studio"/>
    <img src="_assets/studio_0005.jpg" class="all studio"/>
    <img src="_assets/studio_0006.jpg" class="all studio"/>
    <img src="_assets/studio_0001.jpg" 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。

```html
.albums-tab-thumb{
  float: left;
  width: 300px;
}         
```       
接下来要设置.albums-tab-thumb里面的所有图片的宽度为它的宽度-10px（5px的padding），并将背景色设置为白色。
```html

.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，这样在它们执行动画的时候，都会显示在其它图片的上面。

```html
.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%。

```html
.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); 
}               
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果