JSDM

HTML

7
 
1
#title
2
#mug
3
  #mug-inside
4
  #coffee-border
5
.spot
6
  .spot-part
7
!

CSS

xxxxxxxxxx
94
 
1
@import url(http://fonts.googleapis.com/css?family=Amatic+SC);
2
3
$size: 15em;
4
$border: 2em;
5
$ear: 4.5em;
6
$mug-color: #C73B0B;
7
$mug-inside-color: #1F0505;
8
$spot-size: random();
9
10
html, body {
11
  margin: 0;
12
  padding: 0;
13
  background-color: #E7A136
14
}
15
16
#title {
17
  font: 7em Amatic SC;
18
  position: absolute;
19
  top: 5%;
20
  left: 50%;
21
  margin-left: -.8em;
22
}
23
24
#mug {
25
  position: absolute;
26
  left: 50%;
27
  margin-left: -$size / 2;
28
  top: 50%;
29
  margin-top: -$size / 2;
30
  width: $size;
31
  height: $size;
32
  background-color: $mug-color;
33
  border-radius: 100%;
34
  box-shadow: 8px 9px #222;
35
  
36
  #coffee-border {
37
    position: absolute;
38
    left: 50%;
39
    margin-left: -$size / 2;
40
    top: 50%;
41
    margin-top: -$size / 2;
42
    height: $size - $border;
43
    width: $size - $border;
44
    border: $border / 2 $mug-color solid;
45
    border-radius: 100%;
46
  }
47
  
48
  &::before {
49
    position: absolute;
50
    top: ($size / 2) - (($ear / 4) / 2);
51
    left: -$ear + .1;
52
    content: "";
53
    width: $ear;
54
    height: $ear / 3;
55
    background-color: $mug-color;
56
    border-radius: 8px 0 0 8px;
57
    box-shadow: 5px 10px 0 0 #222;
58
    z-index: 0;
59
  }
60
  
61
  #mug-inside {
62
    position: absolute;
63
    left: $border / 2;
64
    top: $border / 2;
65
    height: $size - $border;
66
    width: $size - $border;
67
    background-color: $mug-inside-color;
68
    border-radius: 100%;
69
    box-shadow: 15px 10px 0 #161616 inset;
70
  }
71
}
72
73
.spot {
74
  height: $size - $border;
75
  width: $size - $border;
76
  box-shadow: 10px 20px 0 3px $mug-inside-color;
77
  border-radius: 100%;
78
  position: absolute;
79
  top: 50%;
80
  left: 50%;
81
  margin-top: -$size / 2 + 5;
82
  margin-left: -$size / 2 + 4;
83
  z-index: -1;
84
  /* This is a part of the spot, but if you uncomment it, it's gonna be ugly.
85
  .spot-part {
86
    position: relative;
87
    top: -1.3em;
88
    right: 0em;
89
    height: $size - $border;
90
    width: $size - $border;
91
    box-shadow: 5px 10px 0 3px $mug-inside-color;
92
    border-radius: 100%;
93
  }*/
94
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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