gsap+ScrollTrigger实现层叠立体图片轮播幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap+ScrollTrigger实现层叠立体图片轮播幻灯片效果代码,滚动鼠标滚动也能驱动。
代码标签: gsap ScrollTrigger 层叠 立体 图片 轮播 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background: #222; min-height: 100vh; padding: 0; margin: 0; } .gallery { position: absolute; width: 100%; height: 100vh; overflow: hidden; } .cards { position: absolute; width: 14rem; height: 18rem; top: 40%; left: 50%; transform: translate(-50%, -50%); } .cards li { list-style: none; padding: 0; margin: 0; width: 14rem; height: 18rem; text-align: center; line-height: 18rem; font-size: 2rem; font-family: sans-serif; border: 8px solid white; position: absolute; top: 0; left: 0; background-size: cover; } .cards li:nth-of-type(1) { background-image: url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(2) { background-image: url(//repo.bfw.wiki/bfwrepo/image/627ef04e2d970.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(3) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62842707b1cc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(4) { background-image: url(//repo.bfw.wiki/bfwrepo/image/628427c4ca32c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(5) { background-image: url(//repo.bfw.wiki/bfwrepo/image/6284286d59cbd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(6) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62842812c0d7e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(7) { background-image: url(//repo.bfw.wiki/bfwrepo/image/6284309a1b4e3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(8) { background-image: url(//repo.bfw.wiki/bfwrepo/image/6284325120d66.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(9) { background-image: url(//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(10) { background-image: url(//repo.bfw.wiki/bfwrepo/image/628435eb01be2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(11) { background-image: url(//repo.bfw.wiki/bfwrepo/image/629a8c7fd8ea6.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(12) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62b11866983db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(13) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62b2f29d7896d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(14) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(15) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62bb8b9308b60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(16) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62c4c76e3f9fa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(17) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62d380378fba9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(18) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62e1fd6ee09cc.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(19) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62eb2737168b1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(20) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(21) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(22) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(23) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(24) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(25) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(26) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(27) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(28) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(29) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(30) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } .cards li:nth-of-type(31) { background-image: url(//repo.bfw.wiki/bfwrepo/image/62edc80e37bdb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90); } li:hover { color: #fff; } .actions { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); } button { display: inline-block; outline: none; border: none; padding: 8px 14px; background: #414141; background-image: -webkit-linear-gradient(top, #575757, #414141); background-image: -moz-linear-gradient(top, #575757, #414141); background-image: -ms-linear-gradient(top, #575757, #414141); background-image: -o-linear-gradient(top, #575757, #414141); background-image: linear-gradient(to bottom, #575757, #414141); text-shadow: 0px 1px 0px #414141; -webkit-box-shadow: 0px 1px 0px 414141; -moz-box-shadow: 0px 1px 0px 414141; box-shadow: 0px 1px 0px 414141; color: #aaaaaa; text-decoration: none; margin: 0 auto 10px; border-radius: 4px; padding: 12px 25px; font-family: "Signika Negative.........完整代码请登录后点击上方下载按钮下载查看
网友评论0