css实现滚动卡片内容堆叠布局效果代码-html代码-BFW代码库

css实现滚动卡片内容堆叠布局效果代码

代码语言：html

代码描述：css实现滚动卡片内容堆叠布局效果代码

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


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

<head>

  <meta charset="UTF-8">

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

html,
body {
  height:100%;
}

img {
  display:block;
  max-width:100%;
}

main {
  position:relative;
}

header {
  min-height:100vh;
  display:flex;
  width:100%;
  position:sticky;
  top:0;
}

header > * {
  flex:1 1;
}

h1 {
  -webkit-text-stroke:1.5px black;
  color:transparent;
  letter-spacing:4px;
  max-width:12ch;
}

.left {
  display:grid;
  place-items:center;
  padding:4rem;
  font-size:3.5rem;
  line-height:1;
  background-color:hsl(120, 0%, 95%);
}

.right img {
  object-fit:cover;
  width:100%;
  height:100%;
}

.card-container {
  position:sticky;
  top:0;
  display:grid;
  place-items:center;
  font-size:5rem;
  padding:2rem;
}

.card-container:nth-of-type(2) {
  top:20px;
}


.card-container:nth-of-type(3) {
  top:40px;
}

.card-container:nth-of-type(4) {
  top:60px;
}

.card {
  border-radius:50px;
  border:1px solid hsl(0, 0%, 60%);
  background-color:hsl(0, 0%, 95%);
  width:100%;
  min-height:100vh;
  display:grid;
  place-items:center;
  color:transparent;
  -webkit-text-str.........完整代码请登录后点击上方下载按钮下载查看