JSDM

HTML

 
1
<div class="centered">
2
  <h1><strong>Hubot > </strong>Greetings unidentified one, please enter your GitHub user name</h1>
3
  <input type="text" /></input>
4
  <span class="meta">(Enter GitHub user name)</span>
5
</div>
6
​
7
<footer>
8
  <span class="status"></span>
9
</footer>
!

CSS

xxxxxxxxxx
133
 
1
/* Welcome to Compass.
2
 * In this file you should write your main styles. (or centralize your imports)
3
 * Import this file using the following HTML or equivalent:
4
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
5
​
6
$sans: 'Noto Stans';
7
​
8
* {
9
  box-sizing: border-box;
10
}
11
​
12
​
13
@mixin vertical-align {
14
  position: relative;
15
  top: 50%;
16
    -webkit-transform: translateY(-50%);
17
    -ms-transform: translateY(-50%);
18
    transform: translateY(-50%);
19
}
20
​
21
html {
22
    background-image: linear-gradient(#007AAA, #292931);
23
    top: 0;
24
    bottom: 0;
25
    position: absolute;
26
    display: inline-block;
27
    height: 100%;
28
    width: 100%;
29
}
30
​
31
body {
32
  font-family: 'Noto Sans', sans-serif;
33
  padding: 1em;
34
  -webkit-font-smoothing: antialiased;
35
  top: 0;
36
  bottom: 0;
37
  position: absolute;
38
  display: inline-block;
39
  height: 100%;
40
  width: 100%;
41
}
42
​
43
h1 {
44
  font-size: 21px;
45
  color: #fff;
46
  letter-spacing: -0.05em;
47
  line-height: 28px;
48
  font-weight: normal;
49
  margin: 20px 0;
50
​
51
  strong {
52
    font-weight: bold;
53
  }
54
}
55
​
56
@-webkit-keyframes typing {
57
    from { width: 0 }
58
    to { width: 100% }
59
}
60
​
61
@-moz-keyframes typing {
62
    from { width: 0% }
63
    to { width:100% }
64
}
65
​
66
@-webkit-keyframes blink-caret {
67
    from, to { border-color: transparent }
68
    50% { border-color: rgba(#fff, .8) }
69
}
70
​
71
@-moz-keyframes blink-caret {
72
    from, to { border-color: transparent }
73
    50% { border-color: #fff }
74
}
75
​
76
h1 {
77
    width: 100%;
78
    white-space: nowrap;
79
    overflow: hidden;
80
    border-right: 12px solid #fff;
81
    padding-right: 2px;
82
    -webkit-animation: typing 1s steps(71, end), blink-caret 1s step-end infinite;
83
    -moz-animation: typing 1s steps(71, end), blink-caret 1s step-end infinite;
84
}
85
​
86
.centered {
87
  @include vertical-align;
88
  width: 100%;
89
  max-width: 700px;
90
  margin: 0 auto;
91
  text-align: left;
92
​
93
  input {
94
    background: #212121;
95
    padding: 20px;
96
    width: 100%;
97
    border: none;
98
    color: #fff;
99
    border-radius: 2px;
100
    font-size: 24px;
101
    outline: none;
102
    cursor: block;
103
  }
104
​
105
  .meta {
106
    display: inline-block;
107
    margin: 10px 0;
108
    font-size: 13px;
109
    line-height: 24px;
110
    color: rgba(#fff, .7);
111
  }
112
}
113
​
114
footer {
115
  height: 50px;
116
  text-align: center;
117
  position: absolute;
118
  background: #212121;
119
  bottom: 0;
120
  left: 0;
121
  right: 0;
122
123
  .status {
124
    display: inline-block;
125
    height: 50px;
126
    width: 100px;
127
    background-image: url('http://cl.ly/image/2w1Q1P0p2H1i/image');
128
  
129
    &.thinking {
130
      background-image: url('http://cl.ly/image/1l0Q283n2U0q/image');  
131
    }
132
  }
133
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
7
 
1
$('input').focus(function(){
2
  $('.status').toggleClass('thinking');
3
});
4
​
5
$('input').blur(function(){
6
  $('.status').toggleClass('thinking');
7
});
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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