JSDM

HTML

80
1
<div class="cassette">
2
3
  <div class="screws">
4
    <div class="screw">
5
        <div class="screw-inner"></div>
6
     </div>
7
    <div class="screw">
8
        <div class="screw-inner"></div>
9
      </div>
10
    <div class="screw">
11
        <div class="screw-inner"></div>
12
    </div>
13
    <div class="screw">
14
        <div class="screw-inner"></div>
15
    </div>
16
  </div>
17
18
  <div class="outer-sticker">
19
  
20
    <div class="sticker">
21
    
22
      <div class="sticker-header">
23
        <div class="side">A</div>
24
        <div class="notes">
25
          <hr>
26
          <hr>
27
          <hr>
28
        </div><!-- /.notes -->
29
      </div><!-- /.sticker-header -->
30
    
31
      <div class="sticker-center">
32
        <div class="stripe-a"></div>
33
        <div class="stripe-b"></div>
34
        <div class="cassete-center">
35
          <div class="circle">
36
            <i></i>
37
            <i></i>
38
            <i></i>
39
            <i></i>
40
            <i></i>
41
            <i></i>
42
          </div>
43
          <div class="circle">
44
            <i></i>
45
            <i></i>
46
            <i></i>
47
            <i></i>
48
            <i></i>
49
            <i></i>
50
          </div>
51
          <div class="window">
52
            <div class="reel"></div>
53
            <div class="reel"></div>
54
          </div>
55
        </div>
56
      </div><!-- /.sticker-center-->
57
    
58
      <div class="sticker-bottom">
59
        <hr>
60
        <p>Normal Bass EQ</p>
61
        <hr>
62
      </div><!-- /.sticker-bottom-->
63
    
64
    </div><!-- /.sticker -->
65
  </div><!-- /.outer-sticker -->
66
67
  <div class="cassette-bottom-outer">
68
    <div class="cassette-bottom">
69
      <div class="screw">
70
        <div class="screw-inner"></div>
71
      </div>
72
      <div class="holes">
73
        <div class="hole-big"></div>
74
        <div class="hole-small"></div>
75
        <div class="hole-big"></div>
76
        <div class="hole-small"></div>
77
      </div>
78
    </div>
79
  </div>
80
</div><!-- /.cassette -->
!

CSS

​x
 
1
//colors
2
$bg-color: #efd1b7;
3
$orange: #d55e40;
4
$gray: #363844;
5
$light-gray: #756046;
6
$red: #8b392e;
7
$yellow: #f3ae53;
8
$blue: #449ba2;
9
$white: #ffffff;
10
​
11
//Compass Imports
12
@import "compass/reset/";
13
@include global-reset;
14
@import "compass/typography/";
15
//main
16
* {
17
  @include box-sizing(border-box);
18
}
19
​
20
body {
21
  background: $bg-color;
22
  color: $gray;
23
  padding: 40px 0;
24
  font-family: 'Lato', sans-serif;
25
}
26
​
27
//screw {
28
.screw {
29
  position: absolute;
30
  display: block;
31
  width: 22px;
32
  height: 22px;
33
  background: $red;
34
  border-radius: 50%;
35
}
36
.screw-inner {
37
  position: absolute;
38
  display: block;
39
  width: 16px;
40
  height: 16px;
41
  border-radius: 50%;
42
  top: 3px;
43
  left: 3px;
44
  @include rotate(50deg);
45
   &:before, &:after {
46
     content: "";
47
     position: absolute;
48
     z-index: 2;
49
     background: $blue;
50
     width: 5px;
51
     @include border-radius(2px);
52
   }
53
  &:before {
54
    left: 50%;
55
    width: 40%;
56
    margin-left: -20%;
57
    height: 100%;
58
  }
59
  &:after {
60
    top: 50%;
61
    height: 40%;
62
    margin-top: -20%;
63
    width: 100%;
64
  }
65
}
66
.screws {
67
  .screw {
68
    &:nth-child(1) {
69
      top: 5px;
70
      left: 10px;
71
    }
72
  
73
    &:nth-child(2) {
74
      top: 5px;
75
      right: 10px;
76
    }
77
    &:nth-child(3) {
78
      left: 10px;
79
      bottom: 5px;
80
    }
81
  
82
    &:nth-child(4) {
83
      right: 10px;
84
      bottom: 5px;
85
    }
86
  }
87
}
88
//cassette
89
.cassette {
90
    position:relative;
91
    margin: 0 auto;
92
    background:$orange;
93
    @include border-radius(16px);
94
    width: 534px;
95
    height: 335px;
96
    &:before {
97
      position:absolute;
98
      z-index:20;
99
      bottom:20px;
100
      left:-3px;
101
      content:"";
102
      height:90px;
103
      border-right: $orange solid 5px;
104
      border-top:transparent solid 10px;
105
      border-bottom:transparent solid 10px;
106
    }
107
    &:after {
108
      position:absolute;
109
      z-index:20;
110
      bottom:20px;
111
      right: -3px;
112
      content:"";
113
      height:90px;
114
      border-left: $orange solid 5px;
115
      border-top:transparent solid 10px;
116
      border-bottom:transparent solid 10px;
117
    }
118
  }//.cassette
119
  .outer-sticker {
120
    background: $red;
121
    width: 474px;
122
    height: 210px;
123
    position: relative;
124
    left: 50%;
125
    margin-left: -237px;
126
    @include border-radius(16px);
127
    position: relative;
128
    margin-top: 25px;
129
    display: inline-block;
130
  
131
  }
132
  .sticker {
133
    background: $yellow;
134
    margin: 0 auto;
135
    width: 466px;
136
    height: 200px;
137
    @include border-radius(16px);
138
    position: relative;
139
    margin-top: 5px;
140
    }
141
    .sticker-header {
142
      float: left;
143
      //background: black;
144
      padding: 10px 20px 0px;
145
      width: 100%;
146
      .side {
147
        font-weight: 700;
148
        font-size: 30px;
149
        color: $yellow;
150
        padding: 0 5px 1px;
151
        line-height: 32px;
152
        margin-top: 10px;
153
        background: $orange;
154
        float: left;
155
        @include border-radius(5px);
156
      }
157
      .notes {
158
        float: left;
159
        margin-left: 15px;
160
        width: 374px;
161
        hr {
162
          border: 0;
163
          height: 3px;
164
          background: $light-gray;
165
          margin-bottom: 15px;
166
        }
167
      }
168
    }//.sticker-header
169
    .sticker-center {
170
        position: relative;
171
        display: inline-block;
172
        width: 100%;
173
        .stripe-a {
174
          background: $red;
175
          display: inline-block;
176
          width: 100%;
177
          height: 30px;
178
        }
179
        .stripe-b {
180
          background: $blue;
181
          display: inline-block;
182
          width: 100%;
183
          height: 30px;
184
          margin-top: 30px;
185
        }
186
        .cassete-center {
187
          background: $orange;
188
          margin: 0 auto;
189
          width: 318px;
190
          height: 92px;
191
          @include border-radius(16px);
192
          position: absolute;
193
          top: 0;
194
          left: 50%;
195
          margin-left: -159px;
196
        
197
          .circle {
198
            border-radius: 50%;
199
            width: 65px;
200
            height: 65px;
201
            background: #fff;
202
            position: absolute;
203
            top: 12px;
204
            @include animation(spin 2s infinite linear);
205
          
206
            &:nth-child(1) { left: 15px; }
207
            &:nth-child(2) { right: 15px; }
208
          
209
            i {
210
            display: block;
211
            position: absolute;
212
            width: 4px;
213
            height: 55%;
214
            left: 45%;
215
            top: -5%;
216
            border-top: solid 15px $orange;
217
            transform-origin: 50% 100%;
218
            z-index: 999;
219
              &:nth-child(1) { @include rotate(30deg); }
220
              &:nth-child(2) { @include rotate(90deg); }
221
              &:nth-child(3) { @include rotate(150deg); }
222
              &:nth-child(4) { @include rotate(210deg); }
223
              &:nth-child(5) { @include rotate(270deg); }
224
              &:nth-child(6) { @include rotate(330deg); }
225
            }//i
226
          }//.circle
227
        
228
          .window {
229
            position: absolute;
230
            overflow: hidden;
231
            background: white;
232
            width: 122px;
233
            height: 60px;
234
            left: 50%;
235
            margin-left: -61px;
236
            margin-top: 15px;
237
            @include border-radius(5px);
238
            .reel {
239
              border-radius: 50%;
240
              width: 190px;
241
              height: 190px;
242
              background: $red;
243
              position: absolute;
244
              top: -60px;
245
              @include animation(spin 0.8s infinite linear);
246
            
247
              &:nth-child(1) {
248
                left: -150px;
249
              }
250
               &:nth-child(2) {
251
                right: -150px;
252
               }
253
            }
254
          }//.reel
255
        }
256
      }//.sticker-center
257
      .sticker-bottom {
258
        margin: 5px 5px;
259
        border-top: 1px solid $gray;
260
        border-bottom: 1px solid $gray;
261
        overflow: auto;
262
        hr {
263
          border: 0;
264
          height: 3px;
265
          background: $gray;
266
          width: 170px;
267
           &:nth-child(1) {
268
              float: left;
269
           }
270
           &:nth-child(3) {
271
             float: right;
272
           }
273
        }//hr
274
        p {
275
          font-size: 12px;
276
          float: left;
277
          line-height: 19px;
278
          padding-left: 19px;
279
        }
280
      }//.sticker-bottom
281
      .cassette-bottom-outer {
282
        position: absolute;
283
        left: 50%;
284
        margin-left: -175px;
285
        bottom: 0;
286
        border-bottom: 80px solid $red;
287
        border-left: 20px solid transparent;
288
        border-right: 20px solid transparent;
289
        height: 0;
290
        width: 350px;
291
      }
292
      .cassette-bottom {
293
        border-bottom: 80px solid $orange;
294
        border-left: 20px solid transparent;
295
        border-right: 20px solid transparent;
296
        position: relative;
297
        margin-left: -15px;
298
        margin-top: 5px;
299
        height: 0;
300
        width: 340px;
301
        .screw {
302
          bottom: 0px;
303
          left: 50%;
304
          margin-left: -10px;
305
          top: 20px;
306
        }//.screw
307
      }//.cassette-bottom
308
      .holes {
309
        div {
310
          position: absolute;
311
          bottom: -70px;
312
        }
313
        .hole-big {
314
          width: 25px;
315
          height: 25px;
316
          @include border-radius(50%);
317
          background: $white;
318
        }
319
        .hole-small {
320
          width: 20px;
321
          height: 20px;
322
          @include border-radius(50%);
323
          background: $white;
324
        }
325
        :nth-child(1) {
326
          left: 20px;
327
          @include box-shadow($red -2px 2px 0px);
328
        }
329
        :nth-child(2) {
330
          left:  70px;
331
          bottom: -60px;
332
          @include box-shadow($red -2px 2px 0px);
333
        }
334
        :nth-child(3) {
335
          right: 20px;
336
          @include box-shadow($red 2px 2px 0px);
337
        }
338
        :nth-child(4) {
339
          right: 70px;
340
          bottom: -60px;
341
          @include box-shadow($red 2px 2px 0px);
342
        }
343
      }
344
​
345
//credits
346
.credits {
347
  margin-top: 20px;
348
  p {
349
    text-align: center;
350
    color: $orange;
351
    a {
352
      @include link-colors($red, darken( $red, 10% ) , $red, $red, $red);
353
    }
354
  }
355
}
356
​
357
//animation
358
​
359
@include keyframes(spin) {
360
  0% {  @include rotateZ(0deg); }
361
  100% { @include rotateZ(360deg); }
362
}
363
​
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

4
 
1
/*
2
   Inspired by "Press Play" dribble shot by Sean Vickery:
3
   https://dribbble.com/shots/1651416-Press-Play
4
*/
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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