利用css3做一个滚动卡片效果

利用css3做一个滚动卡片效果，下面web建站小编给大家简单介绍一下实现代码，卡片效果如右图！

html代码如下：

<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>
<div class="card">
  <h2>Card Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
</div>

css3代码如下：

body {
  margin-inline:max(0px,((100% - 260px) / 2));
  font:90%/1.4 system-ui;
}
.card {
  position:sticky;
  top:0;
  background:white;
  padding:1.5rem;
  box-shadow:0 -0.5rem 1rem rgba(0,0,0,0.15);
  border-radius:4px;
}
.card:nth-child(1) {
  top:1rem;
  rotate:1deg;
}
.card:nth-child(2) {
  top:2rem;
  rotate:2deg;
}
.card:nth-child(3) {
  top:3rem;
  rotate:3deg;
}
.card:nth-child(4) {
  top:4rem;
  rotate:4deg;
}
.card:nth-child(5) {
  top:5rem;
  rotate:5deg;
}
.card:nth-child(6) {
  top:6rem;
  rotate:6deg;
}
.card:nth-child(7) {
  top:7rem;
  rotate:7deg;
}
.card:nth-child(8) {
  top:8rem;
  rotate:8deg;
}
.card:nth-child(9) {
  top:9rem;
  rotate:9deg;
}
.card:nth-child(10) {
  top:10rem;
  rotate:10deg;
}
.card:nth-child(11) {
  top:11rem;
  rotate:11deg;
}
.card:nth-child(12) {
  top:12rem;
  rotate:12deg;
}
.card:nth-child(13) {
  top:13rem;
  rotate:13deg;
}
.card:nth-child(14) {
  top:14rem;
  rotate:14deg;
}
.card:nth-child(15) {
  top:15rem;
  rotate:15deg;
}

本文链接：http://so.lmcjl.com/news/19081/