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

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

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