HTML卡片经过动画效果

##一、效果
这里写图片描述

##二、代码
####HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>卡片经过效果</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="img">
				<a href="#">
					<img src="images/cardPASS.jpg" width="296" height="200" alt="222" />
				</a>
			</div>
			<p class="title">这是个cardpass</p>
			<p class="author">出自xulinjie</p>

			<div class="info">
				<div class="info-tit">
					底部信息主题
				</div>

				<span class="upright">|</span>

				<div class="data">
					2017
				</div>
				
			</div>
		</div>


		<div class="card">
			<div class="img">
				<a href="#">
					<img src="images/cardPASS.jpg" width="296" height="200" />
				</a>
			</div>
			<p class="title">这是个cardpass</p>
			<p class="author">出自xulinjie</p>

			<div class="info">
				<div class="info-tit">
					底部信息主题
				</div>

				<span class="upright">|</span>

				<div class="data">
					2017
				</div>
				
			</div>
		</div>


		<div class="card">
			<div class="img">
				<a href="#">
					<img src="images/cardPASS.jpg" width="296" height="200" />
				</a>
			</div>
			<p class="title">这是个cardpass</p>
			<p class="author">出自xulinjie</p>

			<div class="info">
				<div class="info-tit">
					底部信息主题
				</div>

				<span class="upright">|</span>

				<div class="data">
					2017
				</div>
				
			</div>
		</div>


		<div class="card">
			<div class="img">
				<a href="#">
					<img src="images/cardPASS.jpg" width="296" height="200" />
				</a>
			</div>
			<p class="title">这是个cardpass</p>
			<p class="author">出自xulinjie</p>

			<div class="info">
				<div class="info-tit">
					底部信息主题
				</div>

				<span class="upright">|</span>

				<div class="data">
					2017
				</div>
				
			</div>
		</div>
	</div>
</body>
</html>

####CSS

*{margin: 0;}

.container{height: 415px;width: 1240px;margin: 0 auto;margin-top: 50px;}

.container .card{height: 415px;width: 296px;
				top:0;position: relative;transition: all 0.25s;
				border-width:1px;border-style: solid;
				/*display: inline-block;*//*此语句也可以*/
				float: left;
				margin-right: 10px;
			}
.container .card:hover{top:-10px;box-shadow: 5px 8px 5px #333;}

.container .card .title{height: 70px;font-weight: 500;font-size: 14px;margin: 0 28px 22px; }/*上，左右，下*/
.container .card .author{height: 20px;font-weight: 500;font-size: 14px;margin: 0 28px 8px;}

.container .card .info{margin: 20px 30px 10px;overflow: hidden;display: inline-block;}

.container .card .info .info-tit{display: inline-block;}
.comtainer .card .info .upright{margin: 0 0.25px; color: #e0e0e0;}
.container .card .info .data{display: inline-block; color: #ff6700;}

##三、代码部分解析
####1、最大容器命名container算是业界比较公认的，提高易读性

####2、块级元素和行间元素
块级元素包括div，h1，h2等
行间元素包括span等

区别就是块级元素无论该行有多大的空余，下一个元素都是在下方，而不会在旁边。行间元素反之。并且行间元素不用定义宽高，它的大小就是内容大小

#####可以参考下面代码和效果来分析

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css">
		.block{width: 40px;height: 40px;background-color: red;}
		.block2{width: 40px;height: 40px;background-color: green;}

		.ini{background-color: blue;}
		.ini2{background-color: yellow;}
	</style>
</head>
<body>
<!-- 块级元素 -->
	<div class="block">
		
	</div>
	<div class="block2">
		
	</div>
	<div class="block">
		
	</div>
	<div class="block2">
		
	</div>

<!-- 行间元素 -->
	<span class="ini">
		xxxxaaxa
	</span>
	<span class="ini2">
		xxadasdas
	</span>
	<span class="ini">
		xxsdsf
	</span>
	<span class="ini2">
		xxdfggg
	</span>
</body>
</html>

####3、使用块级元素变成在同一行的效果实现
可以在块级元素的css加上

display:inline-block;

或者也可以试试浮动

float:left;

####4、margin的四种写法

margin:0; //上下左右边距都为0
margin:0 10px; //上下为0，左右为10px;
margin:1px 1px 1px 1px; //分别代表上，右，下，左
margin:1px 1px 1px; //上，(左右)，下

####5、transition解析
本次效果实现用了transition:all 1s;

这里all指hover中所有都在其中进行动画，也可以改成transition:width 1s;这样就会只实现hover中的width元素实现动画效果，且动画持续1s

HTML卡片经过动画效果

猜你喜欢