|
[tr][td]这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起，当鼠标滑过图片时，图片会以9种不同的方式展开，有扇形、平面展开等等非常酷的效果。
图片：135256lx2k55s22nnz2nts.png  在线演示 9种CSS3炫酷图片预览展示动画特效.zip HTML结构 下面来看看这个图片预览展示动画特效的HTML结构。整个结构使用一个div.albums作为包装容器。它的宽度被设置为1100像素。 [*] 复制代码 在.albums中有9个.albums-tab，分别用于制作9种图片展开效果。在它里面有两个元素：.albums-tab-thumb和.albums-tab-text，分别是用于放置图片和图片的标题。 [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] .sim-anim-1 (7 pictures) [*] 复制代码 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 [/td][/tr] |
|
