这是一款使用纯CSS3制作的超酷文章卡片UI设计效果。该文章卡片带有阴影效果，当鼠标滑过卡片时，文章的描述信息会以滑动动画的方式显示在卡片中。
使用方法
HTML结构
一张卡片的HTML结构如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="tile"> <img src="img/1.jpg"/> <div class="text"> <h1>文章标题</h1> <h2 class="animate-text">文章子标题</h2> <p class="animate-text">文章的描述信息</p> <div class="dots"> <span></span> <span></span> <span></span> </div> </div></div> |
CSS样式
整个卡片包裹容器以flex进行布局。
|
1
2
3
4
5
6
7
|
.wrap{ margin:50px auto 60px auto; width:100%; display:flex; align-items:space-around; max-width:1200px;} |
每张卡片的宽度和高度都设置为380像素。并使用box-shadow属性为卡片设置一个大阴影效果，同时为所有的动画设置ease-out效果的过渡动画。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.tile{ width:380px; height:380px; margin:10px; background-color:#99aeff; display:inline-block; background-size:cover; position:relative; cursor:pointer; transition: all 0.4s ease-out; box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44); overflow:hidden; color:white; font-family:'Microsoft YaHei',sans-serif;} |
卡片中的图片使用绝对定位，宽度和高度都为100%，占据满整个卡片。
|
1
2
3
4
5
6
7
8
9
|
.tile img{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:0; transition: all 0.4s ease-out;} |
卡片中的文本层页采用绝对定位，通过z-index属性将文字放置在图片之上。h2文本和p文本通过translateX函数移动了-200%，即将它们移动到卡片之外，初始不可见。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.tile .text{ z-index:99; position:absolute; padding:30px; height:calc(100% - 60px);}.tile h1{ font-weight:300; margin:0; text-shadow: 2px 2px 10px rgba(0,0,0,0.3);}.tile h2{ font-weight:100; margin:20px 0 0 0; font-style:italic; transform: translateX(200px);}.tile p{ font-weight:300; margin:20px 0 0 0; line-height: 25px; transform: translateX(-200px); transition-delay: 0.2s;}.animate-text{ opacity:0; transition: all 0.6s ease-in-out;} |
在鼠标滑过卡片的时候，卡片的阴影被修改，卡片被放大1.05倍。卡片中的图片的透明度被设置为0.2，文字一共会原来的位置，透明度设置为1。
|
1
2
3
4
5
6
7
8
9
10
11
|
.tile:hover{box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64); transform:scale(1.05);}.tile:hover img{ opacity: 0.2;}.tile:hover .animate-text{ transform:translateX(0); opacity:1;} |