gsap实现消息纸张滚动卷起动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap实现消息纸张滚动卷起动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Poppins:wght@400;500;600;700&amp;display=swap'>
<style>
    #phone {
  --c-frame: black;
  --c-interface: black;
  --c-headline: black;
  --c-screen: #e4e2e2;
  --c-letter: #fff;
  --c-date: black;
  --c-subline: #898989;
  --c-text: #A7A7A7;
  --empty-mask: 100%;
  --headline-y: 0;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  width: 375px;
  color: var(--c-interface);
}
@media (min-width: 501px) {
  #phone {
    border-radius: 9.6%/4.43%;
    box-shadow: 0 0 0 10px var(--c-frame);
  }
  #phone:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 30px;
    width: 200px;
    border-radius: 0 0 16px 16px;
    background: var(--c-frame);
  }
}
#phone .time,
#phone .battery,
#phone .cellular,
#phone .wifi {
  position: absolute;
  top: 17px;
}
@media (max-width: 500px) {
  #phone .time,
#phone .battery,
#phone .cellular,
#phone .wifi {
    display: none;
  }
}
#phone .time {
  left: 21px;
  top: 15px;
  font-size: 100%;
  font-weight: 600;
}
#phone .battery {
  right: 15px;
  width: 25px;
  height: 12px;
}
#phone .cellular {
  right: 64px;
  width: 18px;
  height: 12px;
}
#phone .wifi {
  right: 44px;
  width: 16px;
  height: 12px;
}
#phone .screen {
  position: relative;
  width: 100%;
}
@media (min-width: 501px) {
  #phone .screen {
    padding-bottom: 216.533333333%;
    background: var(--c-screen);
    transform: translateZ(0);
    border-radius: 36px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}
@media (max-width: 500px) {
  #phone .screen {
    height: 100vh;
  }
}
#phone .screen h1 {
  font-size: 30px;
  font-family: "DM Serif Display", serif;
  font-weight: normal;
  color: var(--c-headline);
  text-align: center;
  margin: 0;
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  transform: translateY(var(--headline-y)) translateZ(0);
}
#phone .screen .empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: var(--c-text);
  -webkit-mask-image: linear-gradient(to left, transparent var(--empty-mask), black calc(var(--empty-mask) + 10%));
  mask-image: linear-gradient(to left, transparent var(--empty-mask), black calc(var(--empty-mask) + 10%));
}
#phone .screen .empty svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px auto;
}
#phone .screen .empty span {
  display: block;
  font-size: 20px;
  font-family: "DM Serif Display", serif;
}
#phone .screen .content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#phone .screen .content::-webkit-scrollbar {
  display: none;
}
#phone .screen .content .entries article {
  --clip: 0px;
  --compact-s: 0;
  --spacing: 32px;
  --border-radius-h: 0px;
  --border-radius-v: 0px;
  --article-r: 0deg;
  --article-x: 0;
  --article-y: 0;
  --to-article-r: -4deg;
  --to-article-x: -4px;
  --to-article-y: -44px;
  --compact-o: 0;
  margin-top: var(--spacing);
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 184px;
  transform-origin: 50% 12px;
  transform: translate(var(--article-x), var(--article-y)) rotate(var(--article-r)) translateZ(0);
  border-radius: var(--border-radius-h) 0px 0px 0px/var(--border-radius-v) 0px 0px 0px;
}
#phone .screen .content .entries article:first-of-type {
  --spacing: 184px;
}
#phone .screen .content .entries article:nth-child(2) {
  --to-article-r: -3deg;
  --to-article-x: -2px;
  --to-article-y: -36px;
}
#phone .screen .content .entries article:nth-child(3) {
  --to-article-r: 1deg;
  --to-article-y: -8px;
}
#phone .screen .content .entries article .compact {
  position: absolute;
  left: 0;
  right: 0;
  transform-origin: 50% 0;
  transform: scaleY(var(--compact-s));
  z-index: 1;
}
#phone .screen .content .entries article .compact:before, #phone .screen .content .entries article .compact:after {
  content: "";
}
#phone .screen .content .entries article .compact:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  filter: blur(3px);
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  opacity: var(--compact-o);
}
#phone .screen .content .entries article .compact:after {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 24px;
  background: linear-gradient(#d5d5d5, #ffffff 65%, #dddddd);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.08);
}
#phone .screen .content .entries article .inner {
  transform: translateY(calc(var(--clip) * -1));
  -webkit-clip-path: polygon(0 var(--clip), 100% var(--clip), 100% 100%, 0% 100%);
          clip-path: polygon(0 var(--clip), 100% var(--clip), 100% 100%, 0% 100%);
  background: var(--c-letter);
}
#phone .screen .content .entries article .inner .info {
  padding: 24px;
  border-bottom: 1px solid var(--c-screen);
}
#phone .screen .content .entries article .inner .info strong {
  color: var(--c-date);
  display: block;
  font-family: "DM Serif Display", serif;
  font-size: 21px;
  margin-bottom: 4px;
}
#phone .screen .content .entries article .inner .info small {
  color: var(--c-subline);
  display: block;
  font-size: 14px;
  font-family: "Poppins";
  font-weight: 500;
}
#phone .screen .content .entries article .inner .text {
  padding: 24px;
  color: var(--c-text);
  font-family: "Poppins";
  font-size: 14px;
  line-height: 1.6;
}
#phone .screen .content .entries article .inner .text p {
  margin: 0;
}
#phone .screen .content .entries article .inner .text p:not(:last-child) {
  margin-bottom: 16px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #F0F0F0;
}
@media (min-width: 501px) {
  body {
    padding: 24px;
  }
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>

</head>
<body>

<div id="phone">
    <div class="screen">
        <h1>历史信件</h1>
        <div class="empty">
            <svg viewBox="0 0 48 48">
                <path d="M47.3296 9.02336C46.9238 8.85514 46.4566 8.94821 46.1461 9.25869L26.2748 29.13C26.1703 29.2345 26.0916 29.3551 26.0386 29.4836C25.9866 29.6094 25.9576 29.7471 25.9567 29.8914C25.9567 29.892 25.9567 29.8925 25.9567 29.8929C25.9567 29.8932 25.9567 29.8933 25.9567 29.8934C25.9567 29.8938 25.9567 29.8941 25.9567 29.8946C25.9567 29.8949 25.9567 29.8951 25.9567 29.8954C25.9567 29.8958 25.9567 29.8959 25.9567 29.8962C25.9567 29.8967 25.9567 29.8973 25.9567 29.8979C25.9567 37.2506 19.975 43.2324 12.6223 43.2324C6.85987 43.2324 2.17195 38.5443 2.17195 32.7821C2.17195 28.2919 5.82494 24.639 10.315 24.639C13.7874 24.639 16.6122 27.4639 16.6122 30.9362C16.6122 33.5944 14.4497 35.7569 11.7916 35.7569C9.78483 35.7569 8.15229 34.1242 8.15229 32.1175C8.15229 30.6319 9.36098 29.4232 10.8466 29.4232C11.4463 29.4232 11.9326 28.9371 11.9326 28.3373C11.9326 27.7375 11.4463 27.2513 10.8466 27.2513C8.16337 27.2513 5.98034 29.4343 5.98034 32.1175C5.98034 35.3219 8.58722 37.9288 11.7916 37.9288C13.6865 37.9288 15.4077 37.1712 16.6683 35.943C16.6915 35.9233 16.7141 35.9026 16.736 35.8808L36.6075 16.0094C37.9281 14.6887 38.6555 12.9328 38.6555 11.065C38.6555 6.39509 34.8563 2.5957 30.1864 2.5957C27.4311 2.5957 24.8408 3.66864 22.8925 5.61688L3.02118 25.4882C2.99522 25.5142 2.97079 25.5412 2.94798 25.569C1.12539 27.4303 0 29.9774 0 32.7821C0 39.7421 5.66237 45.4043 12.6223 45.4043C16.8781 45.4043 20.7386 43.6813 23.5432 40.8958C23.5763 40.8697 23.6081 40.8415 23.6385 40.811L43.4582 20.9913C46.387 18.0626 48 14.1685 48 10.0267C48 9.58741 47.7353 9.19147 47.3296 9.02336ZM24.4283 7.15266C25.9663 5.61471 28.0111 4.76765 30.1862 4.76765C33.6586 4.76765 36.4835 7.59259 36.4835 11.065C36.4835 12.3526 35.9821 13.5632 35.0715 14.4737L18.7826 30.7627C18.6899 26.1724 14.9271 22.4669 10.315 22.4669C9.88181 22.4669 9.45426 22.4939 9.03497 22.546L24.4283 7.15266ZM41.9225 19.4555L27.6501 33.7279C27.9264 32.6444 28.0883 31.5148 28.1221 30.3545L45.5033 12.9732C44.9566 15.4096 43.7313 17.6467 41.9225 19.4555Z" fill="currentColor"/>
            </svg>
            <span>No more letters</span>
        </div>
        <div class="content">
            <div class="entries" style="height: 4000px;">
                <article>
                    <div class="compact"></div>
                    <div class="inner">
                        <div class="info">
                            <strong>December 23nd, 2020</strong>
                            <small>The year is almost over</small>
                        </div>
                        <div class="text">
                            <p>Dear People,</p>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.........完整代码请登录后点击上方下载按钮下载查看