自动播放功能的堆叠卡|Javascript和CSS

下载代码

html

css

分享到微信朋友圈

html

<main>
  <div class="content">
    <h1>La Patisserie Belle</h1>
    <p> Welcome to La Patisserie Belle, where every bite is a journey into the
      exquisite world of finely crafted pastries. Our patisserie is
      dedicated to bringing you the most delicious and beautifully designed
      pastries that will delight your senses and elevate your taste
      experience. Nestled in the heart of the city, our patisserie is a
      haven for those who appreciate the finer things in life. </p>
    <button class="btn">Explore More</button>
  </div>
  <div class="stack">
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns1.jpg"
            alt="" /> </div>
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns2.jpg"
            alt="" /> </div>
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns3.jpg"
            alt="" /> </div>
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns4.jpg"
            alt="" /> </div>
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns5.jpg"
            alt="" /> </div>
    <div class="card"> <img
            src="https://www.jq22.com/newjs/nns6.jpg"
            alt="" /> </div>
  </div>
</main>

css

@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Quicksand:wght@300..700&display=swap");

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}

body {
  background-color: #0d0a0b;
  background: linear-gradient(145deg, #55566a 0%, #131318 76%);
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  min-height: 100vh;
}

/* Content */

.content {
  padding-left: 120px;
  color: #c7c7c7c9;
  user-select: none;
}

.content h1 {
  font-family: "Dancing Script", cursive;
  font-size: clamp(2.5rem, 4vw, 6rem);
  font-weight: 700;
  background: -webkit-linear-gradient(0deg, #f76591, #ffc16f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 36px;
  padding-left: 10px;
}

.content p {
  font-size: clamp(0.9rem, 4vw, 1.2rem);
  line-height: 1.6;
  padding-right: 100px;
}

.btn {
  background-color: #f76591;
  background-image: linear-gradient(-180deg, #ffc16f, #f76591);
  font-size: clamp(0.8rem, 8vw, 0.9rem);
  font-weight: 600;
  color: #fff;
  width: max-content;
  outline: 0;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  margin-top: 26px;
  text-align: center;
  transform: scale(1);
  transition: all 0.2s ease-in;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.btn:hover {
  box-shadow: 0 4px 10px rgba(247, 101, 145, 0.5);
  transform: scale(0.98);
}

/* Stacked Cards */

.stack {
  position: relative;
}

.card {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 350px;
  height: 500px;
  border-radius: 2rem;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25),
    0 15px 20px 0 rgba(0, 0, 0, 0.125);
  transition: transform 0.6s;
  user-select: none;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
}

.card:nth-last-child(n + 5) {
  --x: calc(-50% + 90px);
  transform: translate(var(--x), -50%) scale(0.85);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.01);
}

.card:nth-last-child(4) {
  --x: calc(-50% + 60px);
  transform: translate(var(--x), -50%) scale(0.9);
}

.card:nth-last-child(3) {
  --x: calc(-50% + 30px);
  transform: translate(var(--x), -50%) scale(0.95);
}

.card:nth-last-child(2) {
  --x: calc(-50%);
  transform: translate(var(--x), -50%) scale(1);
}

.card:nth-last-child(1) {
  --x: calc(-50% - 30px);
  transform: translate(var(--x), -50%) scale(1.05);
}

.card:nth-last-child(1) img {
  box-shadow: 0 1px 5px 5px rgba(255, 193, 111, 0.5);
}

.swap {
  animation: swap 1.3s ease-out forwards;
}

@keyframes swap {
  30% {
    transform: translate(calc(var(--x) - 250px), -50%) scale(0.85) rotate(-5deg)
      rotateY(65deg);
  }
  100% {
    transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
    z-index: -1;
  }
}

/* Media queries for keyframes */

@media (max-width: 1200px) {
  @keyframes swap {
    30% {
      transform: translate(calc(var(--x) - 200px), -50%) scale(0.85)
        rotate(-5deg) rotateY(65deg);
    }

100% {
      transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
      z-index: -1;
    }
  }
}

@media (max-width: 1050px) {
  @keyframes swap {
    30% {
      transform: translate(calc(var(--x) - 150px), -50%) scale(0.85)
        rotate(-5deg) rotateY(65deg);
    }

100% {
      transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
      z-index: -1;
    }
  }
}

/* Media queries for other classes */

@media (max-width: 1200px) {
  .content {
    padding-left: 80px;
  }

.content p {
    padding-right: 40px;
  }

.card {
    width: 250px;
    height: 380px;
  }
}

@media (max-width: 1050px) {
  .content {
    padding-left: 60px;
  }

.content p {
    line-height: 1.5;
  }

.card {
    width: 220px;
    height: 350px;
  }
}

@media (max-width: 990px) {
  .content p {
    padding-right: 0;
  }

.card {
    width: 200px;
    height: 300px;
  }
}

@media (max-width: 950px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 3fr;
    grid-template-areas:
      "stacked"
      "content";
  }

.content {
    grid-area: content;
    text-align: center;
    padding: 0 90px;
  }

.btn {
    margin-bottom: 30px;
  }

.stack {
    grid-area: stacked;
  }
}

@media (max-width: 650px) {
  main {
    grid-template-rows: 1fr 1fr;
  }

.content {
    padding: 0 50px;
  }

.content h1 {
    padding-left: 0;
  }

.btn {
    padding: 8px 16px;
  }

.card {
    width: 180px;
    height: 260px;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg