Эффект подъема карты Fluent Design - PullRequest
Новая
       26

Эффект подъема карты Fluent Design

0 голосов
/ 05 июля 2018

Я хочу добавить эффект поднятия карты к моим загрузочным картам со свободными стилями дизайна при наведении курсора. Вы можете увидеть, что я имею в виду на веб-сайте Microsoft Design .

Вот что я попробовал, но чего-то не хватает, и я не могу его схватить.

Я пытался: 

.card {
  box-shadow: -3px 6px 5px 0px rgba(176,164,176,1);
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: -3px 18px 20px 0px rgba(99,89,99,1);
}
<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Пожалуйста, спасибо за вашу помощь.

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

То, что эффект выглядит так, будто оно поднимается, это transform: translate3d, , см. Translate3d w3cschools docs .

Когда box-shadow меняется на :hover, сам элемент перемещается в другую позицию, обеспечивая эффект.

Таким образом, давая transform: translate3d(0px, -1px, 0px); (translate3d (x, y, z)), элемент перемещается 1px вверх , а тень отбрасывает вниз . 

.card {
  padding: 15px; /* JUST TO LOOK COOL */
  border: 1px solid #eee;  /* JUST TO LOOK COOL */
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
}
<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>
0 голосов
/ 05 июля 2018

Вам не хватает фактического движения вверх. Есть много способов добиться этого, например: 

.card:hover {
  margin-top: -1px;
}

от макушки.

0 голосов
/ 05 июля 2018

Чтобы достичь этого эффекта, Microsoft использует несколько теней box-а, например: 

box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;

при наведении: 

box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;


.card {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;
}
<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>
...