版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangxinxin1992816/article/details/89640461
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标滑过上浮动效</title>
</head>
<style>
.card .card-body, .card .card-footer, .card .card-header {
padding: .8rem;
padding-bottom: 0;
}
.card .card-body:last-child, .card .card-footer:last-child, .card .card-header:last-child {
padding-bottom: .8rem;
}
.card .card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.card {
width: 300px;
border: none;
margin: 20px;
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);
word-break: break-all;
}
.card:hover {
box-shadow: 0px 1rem 2rem 0px 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 0.25rem 1rem rgba(48, 55, 66, 0.15);
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<body>
<div class="card box-shadow">
<div class="card-header">
<div class="card-title h5">辣椒</div>
<div class="card-subtitle text-gray">四川</div>
</div>
<div class="card-body">
<p>描述： 变态辣</p>
<p v-html="item.evidence"></p>
</div>
<div class="card-footer">
<a class="c-hand" target="blank">评论</a>
<span class="text-gray">2019</span>
</div>
</div>
<div class="card box-shadow">
<div class="card-header">
<div class="card-title h5">榴莲</div>
<div class="card-subtitle text-gray">海南</div>
</div>
<div class="card-body">
<p>描述： 晕倒臭</p>
<p v-html="item.evidence"></p>
</div>
<div class="card-footer">
<a class="c-hand" target="blank">评论</a>
<span class="text-gray">2019</span>
</div>
</div>
<div class="card box-shadow">
<div class="card-header">
<div class="card-title h5">煎饼</div>
<div class="card-subtitle text-gray">山东</div>
</div>
<div class="card-body">
<p>描述： 满口香</p>
<p v-html="item.evidence"></p>
</div>
<div class="card-footer">
<a class="c-hand" target="blank">评论</a>
<span class="text-gray">2019</span>
</div>
</div>
<div class="card box-shadow">
<div class="card-header">
<div class="card-title h5">炸酱面</div>
<div class="card-subtitle text-gray">北京</div>
</div>
<div class="card-body">
<p>描述： 哎哟那个味道！</p>
<p v-html="item.evidence"></p>
</div>
<div class="card-footer">
<a class="c-hand" target="blank">评论</a>
<span class="text-gray">2019</span>
</div>
</div>
</body>
</html>