JSDM

HTML

 
1
<div class="wrapper">
2
  <div class="icon">
3
    <div class="first">
4
      <div class="left"></div>
5
      <div class="right"></div>
6
    </div>
7
    <div class="second"></div>
8
    <div class="last">
9
      <div class="left"></div>
10
      <div class="right"></div>
11
    </div>
12
  </div>
13
</div>
!

CSS

​x
 
1
/*
2
Inspired by https://dribbble.com/shots/1625088-Open-Close-Smash?list=searches&tag=animation&offset=183
3
​
4
P.S. Desktop Chrome Only
5
*/
6
​
7
body{
8
  background-color: #F2276C;
9
}
10
​
11
.icon{
12
  margin: 0 auto;
13
  margin-top: 100px;
14
  width: 50px;
15
  height: 50px;
16
  cursor: pointer;
17
  position: relative;
18
  user-select: none;
19
20
  .first, .last{
21
    width: 50px;
22
    animation: scales 0.6s;
23
  
24
  
25
    .left{
26
      width: 50%;
27
      height: 6px;
28
      background: white;
29
      display: inline-block;
30
      margin-right: -4px;
31
      border-radius: 5px 0 0 5px;
32
      position: relative;
33
      transition: all 0.2s;
34
    }
35
    .right{
36
      width: 50%;
37
      height: 6px;
38
      background: white;
39
      display: inline-block;
40
      margin-right: -4px;
41
      border-radius: 0 5px 5px 0;
42
      position: relative;
43
      transition: all 0.2s;
44
    }
45
  }
46
  .second{
47
    width: 50px;
48
    height: 0px;
49
    display: inline-block;
50
    border: 3px solid white;
51
    box-sizing: border-box;
52
    border-radius: 5px;
53
    animation: scales 0.5s;
54
  }
55
}
56
​
57
.icon.active{
58
  padding-top: 5px;
59
  box-sizing: border-box;
60
61
  .first{
62
    animation: scales 0.5s;
63
    .left{
64
      transform: rotate(45deg) scale(1.2);
65
      left: 4px;
66
      top: 1px;
67
      border-radius: 5px;
68
    
69
    }
70
    .right{
71
      transform: rotate(-45deg) scale(1.2);
72
      right: 4px;
73
      top: 2px;
74
      border-radius: 5px;
75
    }
76
  }
77
78
  .second{
79
    border: 5px solid white;
80
    width: auto;
81
    height: auto;
82
    position: absolute;
83
    top:-14px;
84
    bottom: -16px;
85
    left: -15px;
86
    right: -15px;
87
    border-radius: 50%;
88
    animation: circle 0.5s;
89
  }
90
91
  .last{
92
    animation: scales 0.5s;
93
    .left{
94
      transform: rotate(-45deg) scale(1.2);
95
      left: 4px;
96
      top: 2px;
97
      border-radius: 5px;
98
    }
99
    .right{
100
      transform: rotate(45deg) scale(1.2);
101
      right: 4px;
102
      top: 1px;
103
      border-radius: 5px;
104
    }
105
  }
106
}
107
​
108
@keyframes circle {
109
  0%{
110
    opacity: 0;
111
    transform: scale(0);
112
  }
113
  60%{
114
    opacity: 1;
115
    transform: scale(1.1);
116
  }
117
  70%{
118
    transform: scale(1);
119
  }
120
121
  100%{
122
    opacity: 1;
123
    transform: scale(1)
124
  }
125
}
126
​
127
@keyframes scales {
128
  0%{
129
    transform: scale(0.3)
130
  }
131
  30%{
132
    transform: scale(1.2)
133
  }
134
  60%{
135
    transform: scale(0.9)
136
  }
137
  100%{
138
    transform: scale(1)
139
  }
140
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
4
 
1
$('.icon').click(function(){
2
  $(this).toggleClass('active');
3
});
4
 $.
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................