码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-19 16:50:10      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:img   pos   :hover   open   inf   ack   webkit   ima   字体   

<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 }

 

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

标签:img   pos   :hover   open   inf   ack   webkit   ima   字体   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!