这是一款使用纯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.4 s 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.4 s 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 h 1 { font-weight : 300 ; margin : 0 ; text-shadow : 2px 2px 10px rgba( 0 , 0 , 0 , 0.3 ); } .tile h 2 { 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.2 s; } .animate-text{ opacity: 0 ; transition: all 0.6 s 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 ; } |