CSS3 - 实现简单多层投影

效果图

HTML / template

<template>
  <div></div>
</template>

CSS

div {
  width:500px;
  height:200px;
  border-radius:10px;
  box-shadow:0px 6px 10px rgba(0,0,0,0.5);
  transition: all .6s;
  cursor:pointer;
  &:hover{
    box-shadow:0px 5px 2px rgb(88, 88, 88),
    0px 10px 0px rgb(124, 124, 124),
    0px 15px 0px rgb(150, 150, 150),
    0px 20px 0px rgb(201, 201, 201);
    transform: translateY(-20px);
  }
}