1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| <style type="text/css"> .card { padding: 10px; width: 300px; height: 180px; background-color: #FFF; border: none; border-radius: 6px; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); }
.card:hover { box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px); transition-delay: 0s !important; }
.box-shadow { -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15); box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15); }
.card-header { text-align: center; }
.card-body, .card-footer { text-align: left; } </style>
<div class="card box-shadow"> <div class="card-header"> <p>这是一张卡片</p> </div> <div class="card-body"> <p>描述:鼠标悬浮时,整张纸抬起的效果</p> </div> <div class="card-footer"> <p>原理:增加 transform 属性</p> </div> </div>
|