1

2

3

<li class="listyle1">

    <img src="./arrow.png" alt=""  class="arrow">风光摄影

</li>

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

.listyle1 {

  overflow: hidden;

  position: relative;

}

.listyle1:hover {

  color: #b13732;

  font-weight: 600;

  cursor: pointer;

}

//箭头

.arrow {

  position: absolute;

  left: -12px;

  top: 15px;

  transition: transform 0.5s ease-out;

//兼容不同内核浏览器

  -webkit-transition: transform 0.5s ease-out;

  -moz-transition: transform 0.5s ease-out;

  -ms-transition: transform 0.5s ease-out;

  -o-transition: transform 0.5s ease-out;

}

//核心代码

.listyle1:hover .arrow {

  transform: translateX(40px);

  -webkit-transform: translateX(40px);

  -moz-transform: translateX(40px);

  -ms-transform: translateX(40px);

  -o-transform: translateX(40px);

}