css实现页面滚动鼠标全屏图文堆叠效果代码-html代码-BFW代码库

css实现页面滚动鼠标全屏图文堆叠效果代码

代码语言：html

代码描述：css实现页面滚动鼠标全屏图文堆叠效果代码

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

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

<head>
  <meta charset="UTF-8">
  



  
  
<style>
htmml {
  font-size: 16px;
}

body {
  color: #fff;
  padding: 2rem;
  background: #000;
}

a {
  color: #fff;
}

.footer {
  position: relative;
  z-index: 1;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}
.footer span {
  display: block;
}

.cards_wrap__card h2 {
  font-size: 5vw;
  text-align: center;
}
.cards_wrap__card h2 span {
  margin-top: 1rem;
  display: block;
  font-size: 1rem;
  font-weight: normal;
}
.cards_wrap__card-stick {
  top: 2rem;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 2rem;
  background-position: center;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/641c22abea9d6.png");
  background-size: cover;
  height: 90vh;
}
.cards_wrap__card-stick.color2 {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/641c22f193f68.png");
}
.cards_wrap__card-stick.color3 {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/641c2298b0469.png");
}
.cards_wrap__card-stick.color4 {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/641c234f38880.png");
}
.cards_wrap__card-stick.last {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/641c233ac9f83.png");
}
.cards_wrap__card:nth-child(1) {
  height: 450vh;
}
.cards_wrap__card:nth-child(2) {
  margin-top: -360vh;
  height: 360vh;
}
.cards_wrap__card:nth-child(3) {
  margin-top: -270vh;
  height: 270vh;
}
.cards_wrap__card:nth-child(4) {
  margin-to.........完整代码请登录后点击上方下载按钮下载查看