gsap实现宣传册折叠悬浮平铺显示文字效果代码-html代码-BFW代码库

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/aut.........完整代码请登录后点击上方下载按钮下载查看