js实现带缩略图的三维轮换图切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js实现带缩略图的三维轮换图切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display:grid; place-content:center; min-height:100vh; overflow:hidden; } .w { width:50vmin; height:80vmin; } .ts { width:100%; height:100%; position:relative; --barH:10%;/*active zone height = 100% - barH*/ } .t { --w:20%; display:block; width:var(--w); height:var(--barH); position:absolute; bottom:0; left:var(--l); transform-origin:top left; } .t img { dislay:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; transform:scale(0.8); } [type="radio"] { display:none; } :checked + label.t { left:0; bottom:var(--barH); height:calc(100% - var(--barH)); } :checked + label.t img { -o-object-fit:contain; object-fit:contain; } /* optional */ .ts {/*thumbnails bar*/ perspective:100px; perspective-origin:center center; transform-style:preserve-3d; pointer-events:none; } .ts:after {/*the plate*/ content:""; display:block; width:100%; height:15px; position:absolute; bottom:0; background:linear-gradient(transparent 20%, rgba(0,0,0,0.1)); transform:rotateX(90deg)scaleX(1.2); transform-origin:bottom center; } :not(:checked) + .t {/*inactive labels*/ transform:translate3d(0, 0, -5px); pointer-events:auto; } :not(:checked) + .t:hover { transform:translate3d(0, -7px, -5px); box-shadow:0 30px 30px -25px rgba(0,0,0,0.3); cursor:pointer; } :not(:checked) + .t img { transform:scale(0.9);/*create gaps*/ } :checked + .t {/*active label*/ box-shadow:0 0 0 transparent; -webkit-animation:anim 2s 1; animation:anim 2s 1; } @-webkit-keyframes anim { from { transform:rotateY(6deg)rotateX(3deg) } } @keyframes anim { from { transform:rotateY(6deg)rotateX(3deg) } } /* transitions */ .t {/*active->inactive & hover->rest*/ transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s; } .t:hover, :checked + .t { transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s; } </style> </head> <body > <div class="w"> <div class="ts"> <input type="radio" id="c1" name=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0