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