自适应多层卡片效果-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：自适应多层卡片效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap" rel="stylesheet">

<style>
body {
  background-color: #1c1e2c;
  font-family: Nunito, sans-serif;
  overflow-x: hidden;
}
@media (max-width: 705px) {
  body {
    font-size: 0.8em;
  }
}

.deck {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 5em auto 3em;
}
@media (max-width: 705px) {
  .deck {
    margin: 4em auto;
  }
}
.deck:before {
  content: "";
  position: absolute;
  width: 120%;
  height: 95%;
  top: -1.5em;
  left: 0em;
  border-radius: 8px;
  background: linear-gradient(109.61deg, #2c2f45 4.26%, #202333 84.84%);
}
@media (max-width: 550px) {
  .deck:before {
    left: 1.5em;
  }
}

.card {
  position: relative;
  background-color: #30344c;
  padding: 1em;
  z-index: 5;
  border-radius: 2px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
.card + .card {
  margin-top: 1em;
}
.card:hover {
  z-index: 7;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}
.card:first-of-type {
  margin-left: -3em;
  margin-right: 3em;
}
@media (max-width: 705px) {
  .card:first-of-type {
    margin-left: -1em;
    margin-right: 1em;
  }
}
@media (max-width: 550px) {
  .card:first-of-type {
    margin: 0;
  }
}
.card:nth-of-type(2) {
  margin-left: 5em;
  margin-right: -5em;
  margin-top: -6em;
}
@media (max-width: 705px) {
  .card:nth-of-type(2) {
    margin-left: 1em;
    margin-right: -1em;
    margin-top: 1em;
  }
}
@media (max-width: 550px) {
  .card:nth-of-type(2) {
    margin: 1em 0 0;
  }
}
.card:nth-of-type(3) {
  margin-top: -2em;
  margin-left: -1em;
  margin-right: 1em;
}
@media (max-width: 705px) {
  .card:nth-of-type(3) {
    margin-left: -1em;
    margin-right: 1em;
    margin-top: 1em;
  }
  .card:nth-of-type(3):after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1em;
    display: block;
    border-bottom: 5px solid rgba(192, 57, 43, 0.6);
  }
}
@media (max-width: 550px) {
  .card:nth-of-type(3) {
    margin: 1em 0 0;
  }
}

.cardHeader {
  display: grid;
  grid-template-columns: 36px auto 100px;
  -webkit-box-align: center;
          align-items: center;
  text-transform: uppercase;
}
.cardHeader .cardHeader_type {
  color: #FFD433;
  margin: 10px;
}
.cardHeader .cardHeader_account {
  color: #C6E1ED;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 1px;
}
.cardHeader .cardHeader_date {
  margin: 10px;
  color: #C6E1ED;
  font-size: 0.85em;
  font-weight: 600;
  text-align: right;
}

.cardBody {
  display: -webkit-box;
  display: flex;
  margin: 0 10px 10px;
}
.cardBody .cardText {
  margin: 0 10px 0 0;
  white-space: pre-line;
  color: #c0c3d7;
  font-weight: 400;
  line-height: 1.5;
}
.cardBody .cardText .cardText_highlight {
  color: #ffe480;
}
.cardBody .cardStats {
  font-size: 0.9em;
  text-align: right;
}
.cardBody .cardStats .cardStats_stat {
  display: inline-block;
  white-space: nowrap;
}
.cardBody .cardStats .cardStats_stat + .cardStats_stat {
  margin-top: 5px;
}
.cardBody .cardStats .cardStats_stat.cardStats_stat-likes {
  color: #FFD3D4;
}
.cardBody .cardStats .cardStats_stat.cardStats_stat-retweets {
  color: #B2D9A6;
}
.cardBody .cardStats .cardStats_stat.cardStats_stat-shares {
  color: #d284a3;
}
.cardBody .cardStats .cardStats_stat.cardStats_stat-comments {
  color: #ff9579;
}

svg {
  position: absolute;
  top: 0;
  max-width: 90vw;
  min-width: 500px;
  max-height: 100vh;
  min-height: 725px;
  fill: rgba(192, 57, 43, 0.6);
}
@media (max-width: 705px) {
  svg {
    display: none;
  }
}
svg path:nth-of-type(1) {
  -webkit-transform: scale(0.3) translateY(250px) translateX(15px);
          transform: scale(0.3) translateY(250px) translateX(15px);
}
svg path:nth-of-type(2) {
  -webkit-transform: scale(0.3) translateY(230px) translateX(10px);
          transform: scale(0.3) translateY(230px) translateX(10px);
}
svg path:nth-of-type(3) {
  -webkit-transform: scale(0.3) translateX(256px) translateY(39px);
          transform: scale(0.3) translateX(256px) translateY(39px);
}
svg path:nth-of-type(4) {
  -webkit-transform: scale(0.3) translateY(175px);
          transform: scale(0.3) translateY(175px);
}
svg path:nth-of-type(5) {
  -webkit-transform: scale(0.3) translateX(267px) translateY(50px);
          transform: scale(0.3) translateX(267px) translateY(50px);
}
svg path:nth-of-type(6) {
  -webkit-transform: scale(0.3) translateY(170px) translateX(10px);
          transform: scale(0.3) translateY(170px) translateX(10px);
}
svg path:nth-of-type(7) {
  -webkit-transform: scale(0.3) translateY(150px);
          transform: scale(0.3) translateY(150px);
}
svg path:nth-of-type(8) {
  -webkit-transform: scale(0.3) translateY(150px);
          transform: scale(0.3) translateY(150px);
}
svg path:nth-of-type(9) {
  -webkit-transform: scale(0.3) translateX(230px) translateY(-34px);
          transform: scale(0.3) translateX(230px) translateY(-34px);
}
svg path:nth-of-type(10) {
  -webkit-transform: scale(0.3) translateX(354px) translateY(-35px) rotateY(180deg) rotate(25deg);
          transform: scale(0.3) translateX(354px) translateY(-35px) rotateY(180deg) rotate(25deg);
}
svg path:nth-of-type(11) {
  -webkit-transform: scale(0.3) translateY(85px) translateX(-15px);
          transform: scale(0.3) translateY(85px) translateX(-15px);
}
</style>

</head>
<body translate="no">
<div class='deck'>
<div class='card'>
<header class='cardHeader'>
<i class='fab fa-instagram cardHeader_type'></i>
<span class='cardHeader_account'>@hongkongfp</span>
<span class='cardHeader_date'>Jul 1 6:03</span>
</header>
<div class='cardBody'>
<p class='cardText'>On Tuesday, China’s National People’s Congress Standing Committee unanimously passed a controversial national security law for Hong Kong. The law, which criminalises acts of secession, subversion, foreign interference and terrorism, was promulgated and gazetted on the same day with immediate effect. Details were only revealed late at night as it was directly inserted into the Annex III of the semi-autonomous region’s mini-constitution, bypassing the local legislature.
<span class='cardText_highlight'>#hongkong</span> <span class='cardText_highlight'>#china</span> <span class='cardText_highlight'>#humanrights</span> <span class='cardText_highlight'>#hk&.........完整代码请登录后点击上方下载按钮下载查看