Блог

Главная - Вопросы по программированию - Перебирайте HTML-элементы в CSS и применяйте стиль

Перебирайте HTML-элементы в CSS и применяйте стиль

#css

Вопрос:

У меня есть 4 карты (с возможностью расширения до N карт) в стопке, которые я хочу показать в виде сложенного эффекта с использованием HTML и CSS.

Желаемый Результат: Желаемый Эффект Сложенной Карты

До сих пор у меня есть следующий код, но мне нужна помощь в настройке CSS, чтобы показать эффект сложения для всех 4 карт вместо 2 карт.

 body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card:nth-last-child(1) {
  --y: calc(-50%   15px);
  transform: translate(-50%, var(--y)) scale(1.05);
} 
 <div class="stack">
      <div class="card" style="--i:1">1</div>
      <div class="card" style="--i:2">2</div>
      <div class="card" style="--i:3">3</div>
      <div class="card" style="--i:4">4</div>
</div>

Комментарии:

1. Непонятно, о чем вы спрашиваете, пока вы не нажмете на кодовую строку и не увидите, что каждая карта больше предыдущей в стопке. Пожалуйста, отредактируйте свой вопрос, чтобы включить кодовую строку в качестве набора стеков, а не внешней ссылки.

Ответ №1:

Вы используете пользовательское свойство CSS --y в своих стилях и пользовательское свойство --i в своей разметке.

Я внес некоторые изменения в ваши стили, чтобы продемонстрировать, как вы можете достичь описываемого эффекта.

Рабочий Пример:

 body {
  background-color: #e8eaed;
}
.stack {
  width: 500px;
  height: 500px;
  position: absolute;
}

.card {
  width: 80%;
  min-height: 40%;
  background-color: white;
  position: absolute;
  top: 100px;
  left: 100px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 10rem;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
}

.card {
  transform: translateY(calc((var(--y) * 20px) - 50%)) scale(calc(1.0   var(--y) * 0.05));
} 
 <div class="stack">
      <div class="card" style="--y:1">1</div>
      <div class="card" style="--y:2">2</div>
      <div class="card" style="--y:3">3</div>
      <div class="card" style="--y:4">4</div>
</div>
Метки: