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

<i class="iconArrow" :class="[ littleNavState === item.meta.id ? ‘arrowOpen‘ : ‘‘ ]"></i>

默认效果

 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 }

收起效果

 1 .iconArrow.arrowOpen {
 2     -webkit-transform: translateY(-2px);
 3     -ms-transform: translateY(-2px);
 4     transform: translateY(-2px);
 5 }
 6 .iconArrow.arrowOpen::after {
 7     -webkit-transform: rotate(-45deg) translateX(-2px);
 8     -ms-transform: rotate(-45deg) translateX(-2px);
 9     transform: rotate(-45deg) translateX(-2px);
10 }
11 .iconArrow.arrowOpen::before {
12     -webkit-transform: rotate(45deg) translateX(2px);
13     -ms-transform: rotate(45deg) translateX(2px);
14     transform: rotate(45deg) translateX(2px);
15 }

原文地址：https://www.cnblogs.com/bobo-33/p/12331665.html