jquery实现图片层叠幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery实现图片层叠幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container{ width:100vw; height:80vh; display:flex; justify-content:center; align-items:center; } .slider { height: 750px; width:100vw; display: flex; perspective: 1000px; position: relative; align-items:center; } .box1{ background:url('//repo.bfw.wiki/bfwrepo/image/629544f7afb2f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box2{ background:url('//repo.bfw.wiki/bfwrepo/image/628437b97cda2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box3{ background:url('//repo.bfw.wiki/bfwrepo/image/628436604b2ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box4{ background:url('//repo.bfw.wiki/bfwrepo/image/628435eb01be2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box5{ background:url('//repo.bfw.wiki/bfwrepo/image/628433e9efefa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box6{ background:url('//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .box7{ background:url('//repo.bfw.wiki/bfwrepo/image/6284333f58221.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90'); background-size:cover; background-position:center center;} .slider [class*="box"] { /* float: left; */ overflow: hidden; border-radius:20px; transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6); position:absolute; } .slider [class*="box"]:nth-child(7), .slider [class*="box"]:nth-child(1) { width: 100vh; height: 60vh; transform: scale(0.2) translate(-50%,-50%); top: 10%; z-index:1; } .slider [class*="box"]:nth-child(2), .slider [class*="box"]:nth-child(6) { width: 100vh; height: 60vh; transform: scale(0.4) translate(-50%,-50%); top: 20%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0