gsap实现宣传册折叠悬浮平铺显示文字效果代码
代码语言:html
所属分类:悬停
代码描述:gsap实现宣传册折叠悬浮平铺显示文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { font-family: sans-serif; height: 100%; background-attachment: fixed; background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%); user-select: none; } .photo-bundle { max-width: 80%; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-items: center; flex-direction: row; gap: 0; top: 50vh; perspective: 1000px; translate: 0 -50%; filter: drop-shadow(0 20px 15px rgba(0,0,0,0.5)); position: relative; } .photo-bundle { transition: scale 0.1s ease-in-out, filter 0.1s ease-in-out; } .photo-bundle:hover { filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5)); scale: 0.8; transition: scale 0.2s ease-in-out, filter 0.2s ease-in-out; } .photo { height: 25vw; width: fit-content; padding: 0; margin: 0; line-height: 0; transform-origin: 0 50%; position: absolute; } .photo img { height: 100%; } figcaption { color: white; background-color: #355565; font-size: 1.2em; line-height: 1.2em; text-align: center; margin: 10px auto; padding: 8px 15px; border-radius: 10px; position: absolute; left: 50%; translate: -50% 0; width: fit-content; white-space: nowrap; } figure figcaption { transform-origin: 50% 0; scale: 0; transition: scale 0.3s; } figure:hover figcaption { scale: 1; transition: scale 0.3s; transition-timing-function: ease-out; } </style> </head> <body > <article class='photo-bundle'> <figure class='photo'> <img src="//repo.bfw.wiki/bfwrepo/image/64616ca241e1f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_460,/quality,q_90" alt="A pink flamingo floater toy floating on ocean water. "> <figcaption>Floating flamingo</figcaption> </figure> <figure class='photo'> <img src="//repo.bfw.wiki/bfwrepo/image/6462b7138ecf4.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_460,/quality,q_90" alt="A person surfing in dark blue water. In the background, there is a brown stony cliff. "> <figcaption>Let's surf</figcaption> </figure> <figure class='photo'> <img src="//repo.bfw.wiki/bfwrepo/image/6466afbf6b9ab.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_460,/quality,q_90" alt="A large group of people gathered around a beach bonfire at dusk. "> <figcaption>A beach bonfire</figcaption> </figure> <figure class='photo'> <img src="//repo.bfw.wiki/bfwrepo/image/64671d9184d71.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_460,/quality,q_90" alt="Airplane window view from behind the wing. The sun is setting, casting a golden glow over a field of fluffy white clouds."> <figcaption>A real original photo</figcaption> </figure> </article> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script > let photos = document.getElementsBy.........完整代码请登录后点击上方下载按钮下载查看
网友评论0