关注前端 | 前端博客
当前位置: CSS3 > css 制作IOS开关

css 制作IOS开关

2020-05-03 分类:CSS3 作者:管理员 阅读(301)

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.weui-cells_form label[for]{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.rookie-switch-input {
  position: absolute;
  z-index: -999;
  visibility: hidden;
}
label > * {
  pointer-events: none;
}
.rookie-switch-box {
    display: block;
}
.rookie-switch-box {
  position: relative;
  width: 52px;
  height: 32px;
  border: 1px solid #dfdfdf;
 outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #dfdfdf;
 transition: background-color .1s,border .1s;
}
.rookie-switch-box:before{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background-color: #fdfdfd;
 transition: transform .35s cubic-bezier(.45,1,.4,1),-webkit-transform .35s cubic-bezier(.45,1,.4,1);
}
.rookie-switch-input:checked~.rookie-switch-box:after{
  transform: translateX(20px);
}
.rookie-switch-box:after{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #fff;
 box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform .35s cubic-bezier(.4,.4,.25,1.35),-webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
}
.rookie-switch-input:checked~.rookie-switch-box{
  border-color: #04be02;
 background-color: #04be02;
}
.rookie-switch-input:checked~.rookie-switch-box:before{
  transform: scale(0);
}

html

1
2
3
4
<label for="switch" class="weui-switch-cp">
  <input id="switch" class="rookie-switch-input" type="checkbox">
  <div class="rookie-switch-box"></div>
</label>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - css 制作IOS开关

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线