JSDM

HTML

25
 
1
<phone class=" phone  js-toggle  [ fa fa-codepen ] ">
2
  <div class=" phone__screen">
3
  
4
    <nav class=" top-bar ">
5
        <div class=" top-bar__icon  js-toggle " id="js-toggle">
6
          <span></span>
7
          <span></span>
8
          <span></span>
9
          <span></span>
10
          <span></span>
11
        </div>
12
    </nav>
13
    <nav class=" nav js-toggle ">
14
      <a class=" nav__item  [ fa fa-home ] " href=""></a>
15
      <a class=" nav__item  [ fa fa-codepen ] " href=""></a>
16
      <a class=" nav__item  [ fa fa-pencil ] " href=""></a>
17
      <a class=" nav__item  [ fa fa-user ] " href=""></a>
18
      <a class=" nav__item  [ fa fa-cog ] " href=""></a>
19
    </nav>
20
  
21
    <iframe src="http://jsets.com" frameborder="0"></iframe>
22
  
23
​
24
  </div>
25
</phone>
!

CSS

xxxxxxxxxx
229
 
1
*, *:after, *:before {
2
  -webkit-box-sizing: border-box;
3
  -moz-box-sizing: border-box;
4
  box-sizing: border-box;
5
}
6
​
7
html {
8
  background: #2c3e50;
9
}
10
​
11
.phone {
12
  background: #ccc;
13
  -webkit-box-shadow: 0 0 3em rgba(0, 0, 0, 0.7);
14
  box-shadow: 0 0 3em rgba(0, 0, 0, 0.7);
15
  height: 100%;
16
  left: 50%;
17
  max-height: 568px;
18
  max-width: 320px;
19
  position: absolute;
20
  top: 50%;
21
  -webkit-transform: translate(-50%, -50%);
22
  -ms-transform: translate(-50%, -50%);
23
  transform: translate(-50%, -50%);
24
  width: 100%;
25
}
26
.phone:after, .phone:before {
27
  display: none;
28
  position: absolute;
29
  pointer-event: none;
30
}
31
.phone:before {
32
  background: rgba(0, 0, 0, 0.8);
33
  bottom: 0;
34
  color: rgba(255, 255, 255, 0.4);
35
  display: none;
36
  font-size: 5em;
37
  line-height: 6;
38
  left: 0;
39
  right: 0;
40
  text-align: center;
41
  top: 0;
42
  z-index: 2;
43
}
44
​
45
.phone.open:before {
46
  display: inline-block;
47
}
48
​
49
.phone__screen {
50
  height: 100%;
51
  overflow: hidden;
52
  padding-top: 3em;
53
  position: relative;
54
  width: 100%;
55
}
56
​
57
.top-bar {
58
  background: #222;
59
  height: 3em;
60
  padding: 0 0.25em;
61
  position: absolute;
62
  top: 0;
63
  width: 100%;
64
  z-index: 2;
65
}
66
​
67
.nav {
68
  background: #222;
69
  bottom: -6em;
70
  left: -15%;
71
  height: 10.5em;
72
  padding: 0 2.75em;
73
  position: absolute;
74
  -webkit-transform: rotate(10deg) translate3D(-5em, 10em, 0);
75
  -ms-transform: rotate(10deg) translate3D(-5em, 10em, 0);
76
  transform: rotate(10deg) translate3D(-5em, 10em, 0);
77
  -webkit-transition: 0.4s;
78
  transition: 0.4s;
79
  width: 120%;
80
  z-index: 2;
81
}
82
​
83
.nav.open {
84
  -webkit-transform: rotate(10deg) translate3D(0, 0, 0);
85
  -ms-transform: rotate(10deg) translate3D(0, 0, 0);
86
  transform: rotate(10deg) translate3D(0, 0, 0);
87
}
88
​
89
.nav__item {
90
  background: #ccc;
91
  border: 0.3em solid #222;
92
  border-radius: 50%;
93
  color: #222;
94
  display: inline-block;
95
  height: 3em;
96
  margin: 0 0.2em;
97
  position: relative;
98
  top: -1.5em;
99
  text-decoration: none;
100
  text-align: center;
101
  -webkit-transform: rotate(-10deg) translate3D(-5em, 10em, 0);
102
  -ms-transform: rotate(-10deg) translate3D(-5em, 10em, 0);
103
  transform: rotate(-10deg) translate3D(-5em, 10em, 0);
104
  -webkit-transition: 0.2s ease-in-out;
105
  transition: 0.2s ease-in-out;
106
  width: 3em;
107
}
108
.open .nav__item:nth-child(1) {
109
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
110
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
111
  transform: rotate(-10deg) translate3D(0, 0, 0);
112
  -webkit-transition-delay: 0s;
113
  transition-delay: 0s;
114
}
115
.open .nav__item:nth-child(2) {
116
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
117
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
118
  transform: rotate(-10deg) translate3D(0, 0, 0);
119
  -webkit-transition-delay: 0.1s;
120
  transition-delay: 0.1s;
121
}
122
.open .nav__item:nth-child(3) {
123
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
124
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
125
  transform: rotate(-10deg) translate3D(0, 0, 0);
126
  -webkit-transition-delay: 0.2s;
127
  transition-delay: 0.2s;
128
}
129
.open .nav__item:nth-child(4) {
130
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
131
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
132
  transform: rotate(-10deg) translate3D(0, 0, 0);
133
  -webkit-transition-delay: 0.3s;
134
  transition-delay: 0.3s;
135
}
136
.open .nav__item:nth-child(5) {
137
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
138
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
139
  transform: rotate(-10deg) translate3D(0, 0, 0);
140
  -webkit-transition-delay: 0.4s;
141
  transition-delay: 0.4s;
142
}
143
.nav__item:before {
144
  font-size: 1.5em;
145
  line-height: 1.75;
146
}
147
​
148
.top-bar__icon {
149
  cursor: pointer;
150
  display: inline-block;
151
  font-size: 6px;
152
  height: 6em;
153
  margin: 2%;
154
  position: relative;
155
  -webkit-user-select: none;
156
  -moz-user-select: none;
157
  -ms-user-select: none;
158
  user-select: none;
159
  -webkit-transition: 0.2s ease-in-out;
160
  transition: 0.2s ease-in-out;
161
  width: 6em;
162
  -webkit-tap-highlight-color: transparent;
163
}
164
.top-bar__icon span {
165
  background: #fff;
166
  border-radius: 2em;
167
  -webkit-backface-visibility: hidden;
168
  backface-visibility: hidden;
169
  height: 0.8em;
170
  position: absolute;
171
  -webkit-transition: 0.2s ease-in-out;
172
  transition: 0.2s ease-in-out;
173
  -webkit-tap-highlight-color: transparent;
174
  width: 50%;
175
}
176
.top-bar__icon span:nth-child(1) {
177
  border-radius: 2em 0 0 2em;
178
  left: 0;
179
  top: 1em;
180
}
181
.top-bar__icon span:nth-child(2) {
182
  border-radius: 0 2em 2em 0;
183
  top: 1em;
184
  right: 0;
185
}
186
.top-bar__icon span:nth-child(3) {
187
  left: 0;
188
  top: 2.6em;
189
  width: 100%;
190
}
191
.top-bar__icon span:nth-child(4) {
192
  border-radius: 2em 0 0 2em;
193
  left: 0;
194
  top: 4.2em;
195
}
196
.top-bar__icon span:nth-child(5) {
197
  border-radius: 0 2em 2em 0;
198
  right: 0;
199
  top: 4.2em;
200
}
201
.top-bar__icon.open span:nth-child(1) {
202
  -webkit-transform: rotate(45deg) translate(0.8em);
203
  -ms-transform: rotate(45deg) translate(0.8em);
204
  transform: rotate(45deg) translate(0.8em);
205
}
206
.top-bar__icon.open span:nth-child(2) {
207
  -webkit-transform: rotate(-45deg) translate(-0.9em);
208
  -ms-transform: rotate(-45deg) translate(-0.9em);
209
  transform: rotate(-45deg) translate(-0.9em);
210
}
211
.top-bar__icon.open span:nth-child(3) {
212
  opacity: 0;
213
}
214
.top-bar__icon.open span:nth-child(4) {
215
  -webkit-transform: rotate(-45deg) translate(0.8em);
216
  -ms-transform: rotate(-45deg) translate(0.8em);
217
  transform: rotate(-45deg) translate(0.8em);
218
}
219
.top-bar__icon.open span:nth-child(5) {
220
  -webkit-transform: rotate(45deg) translate(-0.9em);
221
  -ms-transform: rotate(45deg) translate(-0.9em);
222
  transform: rotate(45deg) translate(-0.9em);
223
}
224
​
225
iframe {
226
  height: 100%;
227
  width: 100%;
228
}
229
​
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

4
 
1
$('#js-toggle').on('click', function(e) {
2
  e.preventDefault();
3
  $('.js-toggle').toggleClass('open');
4
});
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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