gsap+ScrollTrigger实现鼠标悬浮图片周围模糊聚焦显示相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:gsap+ScrollTrigger实现鼠标悬浮图片周围模糊聚焦显示相册效果代码
代码标签: gsap ScrollTrigge 鼠标 悬浮 图片 周围 模糊 聚焦 显示 相册
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } html { font-size: 62.5%; } body { margin: 0; font-size: 1rem; font-family: "Koulen", cursive; } div { overflow: hidden; } ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 5rem 3rem; max-width: 1600px; margin-left: auto; margin-right: auto; } @media (max-width: 959px) { ul { padding: 4rem 2rem; grid-template-columns: 1fr 1fr; grid-gap: 2rem; } li:nth-child(2n+1) a { transform-origin: left center; } li:nth-child(2n+2) a { transform-origin: right center; } } @media (min-width: 960px) and (max-width: 1399px) { ul { grid-template-columns: 1fr 1fr 1fr; grid-gap: 4rem; } li:nth-child(3n+1) a { transform-origin: left center; } li:nth-child(3n+3) a { transform-origin: right center; } } @media (min-width: 1400px) { ul { grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5rem; } li:nth-child(4n+1) a { transform-origin: left center; } li:nth-child(4n+4) a { transform-origin: right center; } } li { display: flex; opacity: 0; } a { position: relative; display: flex; will-change: filter, transform; width: 100%; aspect-ratio: 8/5; overflow: hidden; } a:before { content: ""; background: #000; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.4s ease-out; } span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0.8rem; font-size: 2.6rem; line-height: 1.2; color: white; text-align: center; transition: 0.4s opacity ease-out, 0.3s transform ease-out; z-index: 2; word-break: break-all; pointer-events: none; opacity: 0; transform: translateY(5rem); } @media (max-width: 959px) { span { font-size: 2rem; } } @media (hover: none) { span { transition: none; } } img { max-width: 100%; transform: scale(1.2); transition: 1s cubic-bezier(0.27, 0.91, 0.47, 0.99); } a:hover:before, a:focus:before { opacity: 0.2; } a:hover img, a:focus img { transform: scale(1); transition: 0.6s cubic-bezier(0.27, 0.91, 0.47, 0.99); } a:hover span, a:focus span { opacity: 1; transform: translateY(0px); } p { position: fixed; top: 0; left: 0; } </style> </head> <body > <p></p> <div> <ul> <li> <a href="#"> <span>Mount Everest</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284379376f20.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>K2</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284379376f20.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Kangchenjunga</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284370446080.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Lhotse</span> <img src="//repo.bfw.wiki/bfwrepo/image/628436dfc5557.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Makalu</span> <img src="//repo.bfw.wiki/bfwrepo/image/628436b16dc01.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Cho Oyu</span> <img src="//repo.bfw.wiki/bfwrepo/image/628436604b2ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Dhaulagiri I</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284362753312.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Manaslu</span> <img src="//repo.bfw.wiki/bfwrepo/image/628435eb01be2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Nanga Parbat</span> <img src="//repo.bfw.wiki/bfwrepo/image/628435eb01be2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Annapurna I</span> <img src="//repo.bfw.wiki/bfwrepo/image/628435b1bf789.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Gasherbrum Peak</span> <img src="//repo.bfw.wiki/bfwrepo/image/628434d826be9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Broad Peak</span> <img src="//repo.bfw.wiki/bfwrepo/image/628433e9efefa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Gasherbrum IIK4</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>ShishapangmaGosainthan</span> <img src="//repo.bfw.wiki/bfwrepo/image/62843353e6a73.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Gyachung Kang</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284333f58221.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Gasherbrum IIIK3a</span> <img src="//repo.bfw.wiki/bfwrepo/image/628432ce5b47a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Annapurna II</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284327a47c4c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Gasherbrum IVK3</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284325120d66.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Himalchuli</span> <img src="//repo.bfw.wiki/bfwrepo/image/62843122866cd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Distaghil Sar</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284309a1b4e3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Ngadi Chuli</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284286d59cbd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Nuptse</span> <img src="//repo.bfw.wiki/bfwrepo/image/62842812c0d7e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Khunyang Chhish</span> <img src="//repo.bfw.wiki/bfwrepo/image/628427e09d621.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>MasherbrumK1</span> <img src="//repo.bfw.wiki/bfwrepo/image/628427c4ca32c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Nanda Devi</span> <img src="//repo.bfw.wiki/bfwrepo/image/62842767e917f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Chomo Lonzo</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284273e2b668.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Batura Sar</span> <img src="//repo.bfw.wiki/bfwrepo/image/62842707b1cc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Rakaposhi</span> <img src="//repo.bfw.wiki/bfwrepo/image/627ef07191c49.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Namcha Barwa</span> <img src="//repo.bfw.wiki/bfwrepo/image/627ef04e2d970.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Mount Everest</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284379376f20.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>K2</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284379376f20.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Kangchenjunga</span> <img src="//repo.bfw.wiki/bfwrepo/image/6284370446080.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li> <a href="#"> <span>Lhotse</span> <img src="//repo.bfw.wiki/bfwrepo/image/628436dfc5557.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" /> </a> </li> <li>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0