div+css实现滚动到底部抽屉推出效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现滚动到底部抽屉推出效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  background: red;
  font: 100%/1.5 system-ui;
}

main {
  margin-inline: auto;
  padding: 2rem;
  transition: 0.4s;
  background: white;
}
main p {
  max-width: 60ch;
  margin-inline: auto;
}
body.footer-pull main {
  translate: 0 -300px;
  scale: 0.95;
  transform-origin: bottom center;
  box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.5);
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem 2rem 1rem 2rem;
  background: red;
  color: white;
  font-size: 72px;
  text-align: center;
  font-weight: 900;
}
</style>




</head>

<body >
  <main>
    <h1>The Footer Pull</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolores cupiditate eaque corporis sed ratione quibusdam dicta officiis laudantium quae sapiente dolor, eos quod incidunt nisi dolorem amet! Nihil esse, magni eveniet unde quis, voluptatem porro commodi architecto maiores quibusdam, exercitationem ipsa dolorum? Quisquam ut eveniet optio quas sunt veritatis, commodi eius quidem quia nobis facere eligendi sequi dolore magnam aspernatur, adipisci sint perspiciatis ipsa nostrum! Rerum, pariatur quam! Dignissimos incidunt, est quasi distinctio itaque recusandae eveniet error enim unde deserunt. Atque, quisquam libero unde delectus temporibus minima placeat dolor consectetur quasi, eligendi autem molestiae exercitationem quo eius esse itaque!</p>
    <p>Inventore ad, odit expedita, ipsum perspiciatis, possimus libero soluta illo voluptas hic mollitia illum molestiae a doloremque provident eveniet animi sit quas. Et perferendis debitis nulla dicta nesciunt pariatur nam, ullam culpa voluptatibus vero esse, id odio dolorem laboriosam accusantium aperiam, fugit eum ab natus illo recusandae. Quo labore nesciunt debitis recusandae hic pariatur, error reiciendis molestias voluptatum ipsa. Quos veniam adipisci deleniti doloribus voluptate. Corporis eum minima ratione. Perspiciatis, maiores delectus porro sed quaerat, est omnis incidunt non labore iste iure aliquam deserunt earum ex itaque sint nesciunt sapiente numquam ipsam tempora cupiditate ullam vero quod possimus? Aut, eveniet!</p>
    <p>Qui voluptas, quod aperiam rem, perspiciatis consequatur cum soluta repellat saepe quasi asperiores possimus esse illo praesentium maiores perferendis non. Quam, saepe. Sequi dolorem dicta veniam temporibus, fuga vero aliquam maiores modi perspiciatis laudantium quia alias eligendi. Fugiat inventore error nemo fugit ex id, aperiam iste excepturi est beatae vero asperiores, deserunt at praesentium assumenda? Provident voluptate sit quasi aperiam excepturi deleniti nihil impedit consequatur vitae ex. Numquam totam, enim illo saepe assumenda atque voluptatibus, alias recusandae consectetur unde, excepturi ipsam incidunt error iure nostrum soluta corporis est voluptatum. In fuga ea accusantium possimus ut recusandae placeat esse adipisci? Neque?</p>
    <p>Voluptate doloremque totam velit molestias veniam maxime, debitis dignissimos temporibus exercitationem dolores, ipsa eveniet! Molestias quaerat ab animi iusto adipisci quod! Voluptatem quibusdam pariatur vero itaque architecto, doloremque et alias beatae voluptatibus ratione. Facilis veritatis voluptates porro hic sit rem possimus officia saepe, praesentium quia ducimus nam, nobis tempore ab quisquam debitis minus iusto unde illum magnam itaque enim esse! Dolore, voluptatibus dolor neque, id minima nihil, asperiores reiciendis rerum nemo deleniti in iusto? Enim itaque expedita illum adipisci non fugiat error cumque deserunt nam, tenetur perspiciatis pariatur, iste ratione. Molestias enim laborum dolorum atque magnam fuga adipisci? Modi, expedita.</p>
    <p>Ducimus iure at fuga molestias nulla magni repellendus molestiae, minima explicabo eius tenetur eum est doloremque praesentium fugiat earum qui necessitatibus hic laboriosam voluptates, provident ut! Magnam deserunt praesentium, voluptatem sunt vero est consequuntur commodi eos modi at nulla animi ea repellat iure mollitia sed nostrum unde odio et laboriosam vel delectus quae similique. Earum non optio repudiandae enim illum harum quam atque architecto. Nisi eligendi, sunt distinctio ad velit doloremque maiores officiis maxime iste nesciunt sed nihil. Itaque at optio deleniti porro quidem. Sapiente et doloremque deserunt nam at animi, nostrum ut facere ipsum corporis velit, eligendi veniam unde.</p>
    <p>Explicabo velit ipsum architecto ducimus porro nobis, quasi totam sequi possimus quia asperiores repellat iste dolor enim placeat. Accusantium, sed veritatis exercitationem eum rem libero praesentium distinctio placeat minima fuga? Porro quod omnis incidunt minus quasi voluptates repudiandae dolorem repellendus ipsa nemo aut maiores cupiditate dolor optio, labore sequi placeat aliquam possimus ducimus, commodi architecto! Ab corrupti perspiciatis ex quasi quis optio assumenda, vel nam facilis laboriosam debitis natus aliquid, tenetur eos maiores similique sequi provident perferendis magni dignissimos earum. Non accusantium corporis consequatur, dolorum reprehenderit delectus? Rem, ipsa numquam explicabo sint assumenda delectus doloremque quas enim distinctio, odio tempore.</p>
    <p>Reiciendis atque rerum, hic commodi quis n.........完整代码请登录后点击上方下载按钮下载查看