CSS3之图片列表展示特效

在线demo

在线编辑demo

gridtransformtransition

CSS代码

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.main-cons{
background: #F7F5F2;
padding:100px 0;
}
.container{
width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 60px;
}
.container .item{
position: relative;
transform: skew(-10deg);
transition: all 0.25s;
}

.container .item .card{
height: 200px;
background: #808080;
border-radius: 40px;
overflow: hidden;
position: relative;
transition: all 0.25s;
}
.container .item::before{
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-radius: 40px;
opacity: 0;
border: 2px solid #373f51;
transition: all 0.5s 0.05s;
}
.container .item .card::after{
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
background: url("http://img.hb.aicdn.com/3f8e4597fdfba9da223f56301bc59a22692d972b112463-N0jS1j_fw658") no-repeat;
background-size:cover;
background-blend-mode: screen;
width: 100%;
height: 100%;
z-index: 2;
transform: skew(10deg) scale(1.2);
transition:all 0.2s;
background-color: #373f51;
}

.container .item:hover::before{
transform: translate(10px,10px);
opacity: 1;
}
.container .item:hover .card::after{
background-blend-mode: normal;
}
.container .item:hover .card{
transform: translate(-10px,-10px);
}

HTML代码

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
29
30
31
32
33
34
35
36
37
38
39
40
<div class="main-cons">
<div class="container">
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
<div class="item">
<div class="card">
</div>
</div>
</div>
</div>

在线demo

在线编辑demo