css鼠标滑过卡片上浮动效

2019-04-28 16:56:37 阅读：500 来源： 互联网

标签：box 66 鼠标 0.15 2019 css 滑过 shadow card

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css鼠标滑过卡片上浮动效