JSDM

HTML

23
 
1
%form
2
  .frame
3
    %input#radio_1{:type=>'radio',:name=>'radio',:checked=>'checked'}
4
    %label.radio{:for=>'radio_1'} <i class="fa fa-times"></i>
5
    %input#radio_2{:type=>'radio',:name=>'radio'}
6
    %label.radio{:for=>'radio_2'} <i class="fa fa-times"></i>
7
    %input#radio_3{:type=>'radio',:name=>'radio'}
8
    %label.radio{:for=>'radio_3'} <i class="fa fa-times"></i>
9
    %input#radio_4{:type=>'radio',:name=>'radio'}
10
    %label.radio{:for=>'radio_4'} <i class="fa fa-times"></i>
11
    %input#radio_5{:type=>'radio',:name=>'radio'}
12
    %label.radio{:for=>'radio_5'} <i class="fa fa-times"></i>
13
  .frame
14
    %input#check_1{:type=>'checkbox',:name=>'check',:checked=>'checked'}
15
    %label.check{:for=>'check_1'} <i class="fa fa-check"></i>
16
    %input#check_2{:type=>'checkbox',:name=>'check'}
17
    %label.check{:for=>'check_2'} <i class="fa fa-check"></i>
18
    %input#check_3{:type=>'checkbox',:name=>'check'}
19
    %label.check{:for=>'check_3'} <i class="fa fa-check"></i>
20
    %input#check_4{:type=>'checkbox',:name=>'check'}
21
    %label.check{:for=>'check_4'} <i class="fa fa-check"></i>
22
    %input#check_5{:type=>'checkbox',:name=>'check'}
23
    %label.check{:for=>'check_5'} <i class="fa fa-check"></i>
!

CSS

x
 
1
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
2
3
$accent: #8ABA56; $speed: .3s; $ease: ease-in-out;
4
5
form {
6
  width: 100vw; height: 100vh;
7
  display: flex;
8
  flex-flow: column wrap;
9
  justify-content: center;
10
  align-items: center;
11
  .frame {
12
    display: flex;
13
    flex-flow: row nowrap;
14
    input { display: none; }
15
    label {
16
      cursor: pointer;
17
      position: relative;
18
      width: 30px; height: 30px;
19
      margin: 10px;
20
      background: $accent;
21
      transition: all $speed $ease;
22
      font-size: 12pt;
23
      color: #FFF;
24
      font-smoothing: antialiased;
25
      &.radio { border-radius: 100%; }
26
      &.check { border-radius: 5px; }
27
      .fa {
28
        position: absolute;
29
        top: 0; left: 0; right: 0; bottom: 0;
30
        opacity: 0;
31
        transform: scale(0);
32
        transition: all $speed $ease;
33
        line-height: 30px;
34
        text-align: center;
35
      }
36
    }
37
    input:checked + label { background: shade($accent,25%);
38
      .fa { opacity: 1; transform: scale(1); }
39
    }
40
  }
41
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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