html 图片没有展开,不使用字体图标和图片，只使用css如何做出展开收起的效果...

1 .iconArrow{

2 position:absolute;

3 top:50%;

4 right:16px;

5 width:10px;

6 -webkit-transition:-webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

7 transition:-webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

8 transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

9 transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

10 }

11 .iconArrow::before,12 .iconArrow::after{

13 position:absolute;

14 width:6px;

15 height:1.5px;

16 background:#fff;

17 background:rgba(0, 0, 0, 0.65) \9;

18 background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));

19 background-image:linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));

20 background-image:none \9;

21 border-radius:2px;

22 -webkit-transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

23 transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

24 transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

25 transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

26 content:‘‘;

27 }

28 .iconArrow::before{

29 -webkit-transform:rotate(45deg) translateY(-2px);

30 -ms-transform:rotate(45deg) translateY(-2px);

31 transform:rotate(45deg) translateY(-2px);

32 }

33 .iconArrow::after{

34 -webkit-transform:rotate(-45deg) translateY(2px);

35 -ms-transform:rotate(-45deg) translateY(2px);

36 transform:rotate(-45deg) translateY(2px);

37 }

38 .nav > li:hover .iconArrow::after,39 .nav > li:hover .iconArrow::before{

40 background:-webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));

41 background:linear-gradient(to right, #1890ff, #1890ff);

42 }

43 .iconArrow::before{

44 -webkit-transform:rotate(-45deg) translateX(2px);

45 -ms-transform:rotate(-45deg) translateX(2px);

46 transform:rotate(-45deg) translateX(2px);

47 }

48 .iconArrow::after{

49 -webkit-transform:rotate(45deg) translateX(-2px);

50 -ms-transform:rotate(45deg) translateX(-2px);

51 transform:rotate(45deg) translateX(-2px);

52 }