JSDM

HTML

33
1
.brand
2
  %a{:href => 'http://www.jamiecoulter.co.uk',:target => '_blank'}
3
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'}
4
.login
5
  .login_title
6
    %span Login to your account
7
  .login_fields
8
    .login_fields__user
9
      .icon
10
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'}
11
      %input{:type => 'text',:placeholder => 'Username'}
12
        .validation
13
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'}
14
    .login_fields__password
15
      .icon
16
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lock_icon_copy.png'}
17
      %input{:type => 'password',:placeholder => 'Password'}
18
      .validation
19
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'}
20
    .login_fields__submit
21
      %input{:type => 'submit',:value => 'Log In'}
22
      .forgot
23
        %a{:href => '#'} Forgotten password?
24
  .success
25
    %h2 Authentication Success
26
    %p Welcome back
27
  .disclaimer
28
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper laoreet placerat. Nullam semper auctor justo, rutrum posuere odio vulputate nec.
29
.authent
30
  %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/puff.svg'}
31
  %p Authenticating...
32
.love
33
  %p Made with <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/love_copy.png" /> by <a href='http://www.jamiecoulter.co.uk' target='_blank'> Jcoulterdesign </a>
!

CSS

​x
 
1
@import url(http://fonts.googleapis.com/css?family=Gudea:400,700);
2
​
3
body{
4
  perspective:800px;
5
  height: 100vh;
6
  margin:0;
7
  overflow: hidden;
8
  font-family: 'Gudea', sans-serif;
9
  background: #EA5C54 ; /* Old browsers */
10
  background: -moz-linear-gradient(-45deg,  #EA5C54  0%, #bb6dec 100%); /* FF3.6+ */
11
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#EA5C54 ), color-stop(100%,#bb6dec)); /* Chrome,Safari4+ */
12
  background: -webkit-linear-gradient(-45deg,  #EA5C54  0%,#bb6dec 100%); /* Chrome10+,Safari5.1+ */
13
  background: -o-linear-gradient(-45deg,  #EA5C54  0%,#bb6dec 100%); /* Opera 11.10+ */
14
  background: -ms-linear-gradient(-45deg,  #EA5C54  0%,#bb6dec 100%); /* IE10+ */
15
  background: linear-gradient(135deg,  #EA5C54  0%,#bb6dec 100%); /* W3C */
16
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EA5C54 ', endColorstr='#bb6dec',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
17
​
18
  ::-webkit-input-placeholder {
19
    color: #4E546D
20
  }
21
  .authent{
22
    display:none;
23
    background: #35394a; /* Old browsers */
24
    background: -moz-linear-gradient(45deg,  #35394a 0%, #1f222e 100%); /* FF3.6+ */
25
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */
26
    background: -webkit-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */
27
    background: -o-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Opera 11.10+ */
28
    background: -ms-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* IE10+ */
29
    background: linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* W3C */
30
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
31
​
32
    position: absolute;
33
    left: 0;
34
    right: 90px;
35
    margin: auto;
36
    width: 100px;
37
    color: white;
38
    text-transform: uppercase;
39
    letter-spacing: 1px;
40
    text-align: center;
41
    padding: 20px 70px;
42
    top: 200px;
43
    bottom: 0;
44
    height: 70px;
45
    opacity: 0;
46
    p{
47
      text-align:center;
48
      color:white;
49
    }
50
  }
51
  .success{
52
    display:none;
53
    color: rgb(213, 216, 226);
54
    p{
55
      font-size:14px;
56
    }
57
  }
58
  p{
59
    color: #5B5E6F;
60
    font-size:10px;
61
    text-align:left;
62
  }
63
  .testtwo{
64
    left:-320px !important;
65
  }
66
  .test{
67
    box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
68
    pointer-events:none;
69
    top:-100px !important;
70
    transform:rotateX(70deg) scale(.8) !important;
71
    opacity: .6 !important;
72
    filter: blur(1px);
73
  }
74
  .login{
75
    opacity:1;
76
    top:20px;
77
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, .85);
78
    transition-property:transform,opacity,box-shadow,top,left;
79
    transition-duration:.5s;
80
    transform-origin:161px 100%;
81
    transform:rotateX(0deg);
82
    position:relative;
83
    .validation{
84
      position:absolute;
85
      z-index:1;
86
      right:10px;
87
      top:6px;
88
      opacity:0;
89
    }
90
    .disclaimer{
91
      position: absolute;
92
      bottom: 20px;
93
      left: 35px;
94
      width: 250px;
95
    }
96
    width:240px;
97
    border-top: 2px solid #D8312A;
98
    height:300px;
99
    position:absolute;
100
    left:0;
101
    right:0;
102
    margin:auto;
103
    top:0;
104
    bottom:0;
105
    padding:100px 40px 40px 40px;
106
    background: #35394a; /* Old browsers */
107
    background: -moz-linear-gradient(45deg,  #35394a 0%, #1f222e 100%); /* FF3.6+ */
108
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */
109
    background: -webkit-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */
110
    background: -o-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Opera 11.10+ */
111
    background: -ms-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* IE10+ */
112
    background: linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* W3C */
113
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
114
​
115
    &_title{
116
      color:rgb(175, 177, 190);
117
      height:60px;
118
      text-align:left;
119
      font-size:16px;
120
    }
121
    &_fields{
122
      height: 208px;
123
      position: absolute;
124
      left: 0;
125
      .icon{
126
        position: absolute;
127
        z-index: 1;
128
        left: 36px;
129
        top: 8px;
130
        opacity:.5;
131
      }
132
      input[type='password']{
133
        color:#DC6180 !important;
134
      }
135
      input[type='text'],input[type='password']{
136
        color: #afb1be;
137
        width: 190px;
138
        margin-top:-2px;
139
        background: rgb(50, 54, 74);
140
        left: 0;
141
        padding: 10px 65px;
142
        border-top: 2px solid rgb(57, 61, 82);
143
        border-bottom: 2px solid rgb(57, 61, 82);
144
        border-right: none;
145
        border-left: none;
146
        outline: none;
147
        font-family: 'Gudea', sans-serif;
148
        box-shadow: none;
149
      }
150
      &__user,&__password{
151
        position:relative;
152
      }
153
      &__submit{
154
        position: relative;
155
        top: 35px;
156
        left: 0;
157
        width: 80%;
158
        right: 0;
159
        margin: auto;
160
        .forgot{
161
          float: right;
162
          font-size: 10px;
163
          margin-top: 11px;
164
          a{
165
            color: rgb(96, 100, 121);
166
          }
167
          text-decoration: underline;
168
        }
169
        input{
170
          &:focus{
171
            box-shadow:none;
172
            outline:none;
173
          }
174
          border-radius:50px;
175
          background:transparent;
176
          padding:10px 50px;
177
          border:2px solid #DC6180 ;
178
          color: #DC6180 ;
179
          text-transform:uppercase;
180
          font-size:11px;
181
          transition-property:background,color;
182
          transition-duration:.2s;
183
          &:hover{
184
            color:white;
185
            background:#DC6180 ;
186
            cursor:pointer;
187
            transition-property:background,color;
188
            transition-duration:.2s;
189
          }
190
        }
191
      }
192
    }
193
  }
194
}
195
​
196
/* Color Schemes */
197
​
198
.love{
199
  position: absolute;
200
  right: 20px;
201
  bottom: 0px;
202
  font-size: 11px;
203
  font-weight: normal;
204
  p{
205
    color:white;
206
    font-weight:normal;
207
    font-family: 'Open Sans', sans-serif;
208
  }
209
  a{
210
    color:white;
211
    font-weight:700;
212
    text-decoration:none;
213
  }
214
  img{
215
    position:relative;
216
    top:3px;
217
    margin:0px 4px;
218
    width:10px;
219
  }
220
}
221
.brand{
222
  position:absolute;
223
  left:20px;
224
  bottom:14px;
225
  img{
226
    width:30px;
227
  }
228
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

46
 
1
$('input[type="submit"]').click(function(){
2
  $('.login').addClass('test')
3
  setTimeout(function(){
4
    $('.login').addClass('testtwo')
5
  },300);
6
  setTimeout(function(){
7
    $(".authent").show().animate({right:-320},{easing : 'easeOutQuint' ,duration: 600, queue: false });
8
    $(".authent").animate({opacity: 1},{duration: 200, queue: false }).addClass('visible');
9
  },500);
10
  setTimeout(function(){
11
    $(".authent").show().animate({right:90},{easing : 'easeOutQuint' ,duration: 600, queue: false });
12
    $(".authent").animate({opacity: 0},{duration: 200, queue: false }).addClass('visible');
13
    $('.login').removeClass('testtwo')
14
  },2500);
15
  setTimeout(function(){
16
    $('.login').removeClass('test')
17
    $('.login div').fadeOut(123);
18
  },2800);
19
  setTimeout(function(){
20
    $('.success').fadeIn();
21
  },3200);
22
});
23
​
24
$('input[type="text"],input[type="password"]').focus(function(){
25
  $(this).prev().animate({'opacity':'1'},200)
26
});
27
$('input[type="text"],input[type="password"]').blur(function(){
28
  $(this).prev().animate({'opacity':'.5'},200)
29
});
30
​
31
$('input[type="text"],input[type="password"]').keyup(function(){
32
  if(!$(this).val() == ''){
33
    $(this).next().animate({'opacity':'1','right' : '30'},200)
34
  } else {
35
    $(this).next().animate({'opacity':'0','right' : '20'},200)
36
  }
37
});
38
​
39
var open = 0;
40
$('.tab').click(function(){
41
  $(this).fadeOut(200,function(){
42
    $(this).parent().animate({'left':'0'})
43
  });
44
});
45
​
46
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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