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

标签：img   pos   :hover   open   inf   ack   webkit   ima   字体    默认效果 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 }  不使用字体图标和图片，只使用css如何做出展开收起的效果标签：img   pos   :hover   open   inf   ack   webkit   ima   字体   原文地址：https://www.cnblogs.com/bobo-33/p/12331665.html