9种CSS3炫酷图片预览展示动画特效
这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。
下面来看看这个图片预览展示动画特效的HTML结构。整个结构使用一个div.albums作为包装容器。它的宽度被设置为1100像素。
CSS样式
这个图片预览展示动画特效有两个主要的样式表:main.css和sim-prev-anim.css。main.css用于一些通用样式,sim-prev-anim.css包含了9种图片预览展示动画特效的CSS代码。为了制作动画效果,.albums-tab-thumb元素要设置一个合适的宽度,记住最终设置的宽度要比这个宽度大10像素,因为要为每一幅图设置5像素的padding。
如果你想将这9中图片预览展示特效中的一种用于你的项目上,你需要引入sim-prev-anim.css文件,然后为你的图片包裹容器设置合适的名称,如果名称与sim-prev-anim.css中的名称不同,需要修改css文件,然后添加合适数量的图片,和选择一种你需要的动画效果的class名称添加到albums-tab-thumb元素上。
注意:每种效果的图片数量是固定的,数量不对显示出来的效果会不太美观。
via:http://www.htmleaf.com/css3/css3donghua/201503071476.html
在线演示
9种CSS3炫酷图片预览展示动画特效.zip
HTML结构下面来看看这个图片预览展示动画特效的HTML结构。整个结构使用一个div.albums作为包装容器。它的宽度被设置为1100像素。
- <div class="albums"></div>
- <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。
- .albums-tab-thumb{
- float: left;
- width: 300px;
- }
- .albums-tab-thumb img {
- height: auto;
- width: 290px;
- background-color: rgba(255,255,255,1);
- padding: 5px;
- }
- .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;
- }
- .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);
- }
如果你想将这9中图片预览展示特效中的一种用于你的项目上,你需要引入sim-prev-anim.css文件,然后为你的图片包裹容器设置合适的名称,如果名称与sim-prev-anim.css中的名称不同,需要修改css文件,然后添加合适数量的图片,和选择一种你需要的动画效果的class名称添加到albums-tab-thumb元素上。
注意:每种效果的图片数量是固定的,数量不对显示出来的效果会不太美观。
via:http://www.htmleaf.com/css3/css3donghua/201503071476.html
【9种CSS3炫酷图片预览展示动画特效】相关文章
2. jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
本文来源:https://www.51html5.com/a1076.html
上一篇:20种炫酷CSS3按钮样式和鼠标滑过特效
下一篇:基于css3的文字3D翻转特效
﹝9种CSS3炫酷图片预览展示动画特效﹞相关内容
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- jQuery灯光投影动画特效
- 6 个迷人而令人惊叹的 HTML5 动画特效
- 20种炫酷CSS3按钮样式和鼠标滑过特效
- 7款纯CSS3实现的炫酷动画应用
- 太棒了!mask 轻松构建炫酷CSS探照特效!
- 用CSS3制作一个令人印象深刻的产品展示
- 7款炫酷实用 jQuery/HTML5图片应用
- 30款css3实现的鼠标经过图片显示描述特效
- 7个炫酷的jQuery动画插件及源码