其他分享
首页 > 其他分享> > css鼠标滑过卡片上浮动效

css鼠标滑过卡片上浮动效

作者：互联网

效果如下：
在这里插入图片描述
代码如下：

<!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>

标签：box,66,鼠标,0.15,2019,css,滑过,shadow,card
来源： https://blog.csdn.net/wangxinxin1992816/article/details/89640461