微信小程序做直播网站,pc端与手机端网站开发的区别,集团主题 wordpress,常州网站制作价格本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果。在我们的demo中#xff0c;图片在鼠标滑过的时候被折叠#xff0c;空出来的部分将显示图片的一些信息。我们将创建一个放置图片html结构#xff0c;当鼠标滑过它时#xff0c;使用jQuery来将折叠或…本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果。在我们的demo中图片在鼠标滑过的时候被折叠空出来的部分将显示图片的一些信息。我们将创建一个放置图片html结构当鼠标滑过它时使用jQuery来将折叠或弯曲效果的html代码插入到合适的DOM节点再用CSS 3D transforms来制作各种不同的效果(折叠或弯曲)。HTML结构:图片的html结构应该像下面一样566124→ 每一张图片都放在一个class为view的div中图片的说明信息放在其下class为view-back的div中。我们将使用jQuery为每个viewdiv中的图片产生折叠效果(插入图片折叠效果的html结构)它的html结构像下面所示每一个“slice”都包含一部分图片作为它的背景这将使我们能够很好的控制效果。此外我们为了做出更逼真的效果添加了一个“overlay” span用来制作一些背景渐变效果。使用jQuery插入以上html的代码如下所示$.fn.hoverfold function( args ) {this.each( function() {$( this ).children( .view ).each( function() {var $item $( this ),img $item.children( img ).attr( src ),struct ;struct ;struct ;struct ;struct ;struct ;struct ;struct ;struct ;struct ;var $struct $( struct );$item.find( img ).remove().end().append( $struct ).find( div.slice ).css( background-image, url( img ) ).prepend( $( ) );} );});};现在我们可以做出很多种折叠或弯曲效果。先来看看第一个demo的效果。CSS样式首先为view div添加样式最重要的一点是为它添加perspective透视属性。.view {width: 316px;height: 216px;margin: 10px;float: left;position: relative;border: 8px solid #fff;box-shadow: 1px 1px 2px rgba(0,0,0,0.05);background: #333;perspective: 500px;}所有的图片切片需要添加一些3D属性和过渡效果。.view .slice{width: 60px;height: 100%;z-index: 100;transform-style: preserve-3d;transform-origin: left center;transition: transform 150ms ease-in-out;}当鼠标滑过图片的时候图片的说明信息被显示出来图片信息的样式如下.view div.view-back{width: 50%;height: 100%;position: absolute;right: 0;background: #666;z-index: 0;}下面给span和锚元素添加样式.view-back span {display: block;float: right;padding: 5px 20px 5px;width: 100%;text-align: right;font-size: 16px;color: rgba(255,255,255,0.6);}.view-back span:first-child {padding-top: 20px;}.view-back a {display: bock;font-size: 18px;color: rgba(255,255,255,0.4);position: absolute;right: 15px;bottom: 15px;border: 2px solid rgba(255,255,255,0.3);border-radius: 50%;width: 30px;height: 30px;line-height: 22px;text-align: center;font-weight: 700;}.view-back a:hover {color: #fff;border-color: #fff;}span前面的图标我们使用 Fontello 来制作。前面我们为每个span都添加了data-icon属性现在可以用它和:before伪元素来显示图标。.view-back span[data-icon]:before {content: attr(data-icon);font-family: icons;color: #aaa;color: rgba(255,255,255,0.2);text-shadow: 0 0 1px rgba(255,255,255,0.2);padding-right: 5px;}除了第一个以外的所有其它图片切片都要移动到右边。.view .s2,.view .s3,.view .s4,.view .s5 {transform: translateX(60px);}为每一个图片切片设置background-position属性。.view .s1 {background-position: 0px 0px;}.view .s2 {background-position: -60px 0px;}.view .s3 {background-position: -120px 0px;}.view .s4 {background-position: -180px 0px;}.view .s5 {background-position: -240px 0px;}overlay覆盖层的透明度开始时为0当鼠标滑过时将其透明度过渡到1。.view .overlay {width: 60px;height: 100%;opacity: 0;position: absolute;transition: opacity 150ms ease-in-out;}.view:hover .overlay {opacity: 1;}给图片添加一些样式它需要绝对定位。为了兼容不支持3D transforms的浏览器我们添加了一个过渡效果。.view img {position: absolute;z-index: 0;transition: left 0.3s ease-in-out;}如果某个浏览器不支持这些3d效果我们简单的从fallback.css回调一些样式。使之平滑回退。效果是当鼠标滑过时图片从右向左滑动。.view {overflow: hidden;}.view:hover img {left: -85px;}.view div.view-back {background: #666;}折叠效果现在我们来创建折叠效果。要做出这种效果我们需要调整viewdiv的perspective透视度和它的过渡效果。.view {perspective: 1050px;}.view div {transition: all 0.3s ease-in-out;}第2、3、4、5个图片切片将进行3D移动和旋转以达到折叠效果。.view:hover .s2{transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);}.view:hover .s3,.view:hover .s5{transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);}.view:hover .s4{transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);}每一个图片切片都向左移动。移动的长度应该是它们各自的宽度但是我们想要使它们之间有一些间隙所以移动了59px。第二个图片切片被旋转了-45度使它表面朝向左边。第三个切片的旋转角度稍微大些使它看起来折叠的较平缓第二和第四个切片表面朝右旋转正90度。请注意我们使用的是一个嵌套结构当我们旋转了父元素它的子元素将一起旋转。为使效果更真实自然我们在遮罩层添加了一些背景渐变。.view .s2 .overlay {background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);}.view .s3 .overlay {background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);}.view .s4 .overlay {background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);}.view .s5 .overlay {background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);}当鼠标滑过图片后图片信息展现出来我们也需要为它添加一些背景渐变。.view div.view-back{background: linear-gradient(left, #0a0a0a 0%,#666666 100%);}折叠效果到这里就完成了。你可以查看下载文件中的其它效果是如何制作的大概原理都相同。本教程就到这里希望对你有所帮助。
