第一步：确定 HTML 代码结构
在创建 HTML 代码前，你首先应该想象它的结构。当你有一个好的模型时，应该第一时间把你想象的页面结构或者你的 CSS 模块及时地在纸上罗列出来。一个设计合理、结构良好的 HTML 页面会让你在接下来的工作过程中变的一异常轻松。
利用css制作卡片UI -- 墨丶水瓶
第二步：定义 Css 规则
一旦确立了 Html 结构，接下来我们将开始为它编写 Css 样式。我将在下面分别贴出每一部分的 Css 代码。
.card
.card {
width:400px;
margin:0px auto;
background-color:white;
box-shadow:0px 5px 20px #999;
}
.card a {
color:#333;
text-decoration:none;
}
.card:hover .card-image img {
width:160%;
filter:grayscale(0);
}将 .card 设置为固定大小。
居中方式为 margin:0px auto;
为了在稍暗的背景中便于区分，将块元素设置为白色。
增加了一个小阴影产生叠加效应。
定义元素 a 标签的颜色与下划线修饰。
定义鼠标移上时放大元素并将滤镜灰度设置为“0”。
.card-image
.card-image {
height:250px;
position:relative;
overflow:hidden;
}
.card-image img {
width:150%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
filter:grayscale(1);
transition-property:filter width;
transition-duration:.3s;
transition-timing-function:ease;
}固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。
设置相对的定位方式，因为它里面包含了绝对定位的元素。
定义内容溢出元素框时裁剪并隐藏。
我们可以根据需要在固定大小的100%基础上增加图像的默认大小，但是不要添加小于400px的图像，也不要忘记遵守其宽度/高度比，以免出现空白。
为了将图像在父元素中完全显示及将 .card-image 的中心作为起点 ，我们需要同时设置定位方式为 absolute 。top 、left 为50% ， 然后能过 transform:translate(-50%, -50%) 设置位移，使 .card-image
的中心点作为起点 。
定义元素为 100% 灰度。
使元素在鼠标移上时在300毫秒内慢速开始，然后变快，然后慢速结束的过渡方式放大。
.card-body
.card-body {
text-align:center;
padding: 15px 20px;
box-sizing: border-box;
}定义 .card-bady 元素的文本对齐方式为居中对齐。
设置元素的内边距。
元素 box-sizing 属性值为 border-box。
字体及其他
.card-date {
font-family: 'Source Sans Pro', sans-serif;
}
.card-title, .card-excerpt {
font-family: 'Playfair Display', serif;
}
.card-date, .card-title {
text-align:center;
text-transform:uppercase;
font-weight: bold;
}
.card-date, .card-excerpt {
color: #777;
}以上就是CSS3实现卡片效果的详细内容，更多请关注创新互联其它相关文章！
