hover时向上动画:transform

hover时向上动画:transform: translateY(-10px):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.col-md-6 .item {
display: block;
background: #FDEBEC;
padding: 10px 20px 15px 20px;
border-radius: 5px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.col-md-6:hover .item {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 4px 10px 8px rgb(0 0 0 / 30%);
box-shadow: 4px 10px 8px rgb(0 0 0 / 30%);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}