首页 > web前端 > css教程 > 关于CSS3实现自定义Checkbox的特效

关于CSS3实现自定义Checkbox的特效

不言
发布: 2018-06-20 16:50:22
原创
1325 人浏览过

这篇文章主要给大家介绍了利用CSS3实现自定义Checkbox特效的相关资料,文中给出了完整的实例代码供大家参考学习,相信对大家学习自定义Checkbox样式具有一定的参考价值,感兴趣的朋友们下面来一起看看吧。

前言

大家都知道CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。所谓CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。最近在工作中遇到一个需求,需要自定义checkbox的样式,最终实现了好几种样式,所以想着分享出来给大家,有需要的朋友们可以参考学习,下面话不多说,来看看详细的介绍吧。

效果图如下

实例代码

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3自定义Checkbox特效</title>

</head>

<style type="text/css">

.tgl{display:none}

.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}

.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}

.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}

.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}

.tgl+.tgl-btn:after{left:0}

.tgl+.tgl-btn:before{display:none}

.tgl:checked+.tgl-btn:after{left:50%}

 

 

.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease}

.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}

.tgl-light:checked+.tgl-btn{background:#9FD6AE}

 

 

.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;border:1px solid #e8eae9}

.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}

.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset 0 0 0 2em #e8eae9;box-shadow:inset 0 0 0 2em #e8eae9}

.tgl-ios+.tgl-btn:active:after{padding-right:.8em}

.tgl-ios:checked+.tgl-btn{background:#86d993}

.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}

.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}

 

 

.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;background:#888}

.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}

.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}

.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}

.tgl-skewed+.tgl-btn:active{background:#888}

.tgl-skewed+.tgl-btn:active:before{left:-10%}

.tgl-skewed:checked+.tgl-btn{background:#86d993}

.tgl-skewed:checked+.tgl-btn:before{left:-100%}

.tgl-skewed:checked+.tgl-btn:after{left:0}

.tgl-skewed:checked+.tgl-btn:active:after{left:10%}

 

 

.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}

.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;background:#f2f2f2;content:"";border-radius:1em}

.tgl-flat:checked+.tgl-btn{border:4px solid #7FC6A6}

.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}

 

 

.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}

.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}

.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02C66F;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}

.tgl-flip+.tgl-btn:before{background:#FF3A19;content:attr(data-tg-off)}

.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);transform:rotateY(-20deg)}

.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}

.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);left:0;background:#7FC6A6}

.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);-ms-transform:rotateY(20deg);transform:rotateY(20deg)}

</style>

 

<body>

 

  <span class=&#39;tg-list-item&#39;>

    <input class=&#39;tgl tgl-light&#39; id=&#39;cb1&#39; type=&#39;checkbox&#39;>

    <label class=&#39;tgl-btn&#39; for=&#39;cb1&#39;></label>

  </span>

 

  <span class=&#39;tg-list-item&#39;>

    <input class=&#39;tgl tgl-ios&#39; id=&#39;cb2&#39; type=&#39;checkbox&#39;>

    <label class=&#39;tgl-btn&#39; for=&#39;cb2&#39;></label>

  </span>

 

  <span class=&#39;tg-list-item&#39;>

    <input class=&#39;tgl tgl-skewed&#39; id=&#39;cb3&#39; type=&#39;checkbox&#39;>

    <label class=&#39;tgl-btn&#39; data-tg-off=&#39;OFF&#39; data-tg-on=&#39;ON&#39; for=&#39;cb3&#39;></label>

  </span>

 

  <span class=&#39;tg-list-item&#39;>

    <input class=&#39;tgl tgl-flat&#39; id=&#39;cb4&#39; type=&#39;checkbox&#39;>

    <label class=&#39;tgl-btn&#39; for=&#39;cb4&#39;></label>

  </span>

   

  <span class=&#39;tg-list-item&#39;>

    <input class=&#39;tgl tgl-flip&#39; id=&#39;cb5&#39; type=&#39;checkbox&#39;>

    <label class=&#39;tgl-btn&#39; data-tg-off=&#39;Nope&#39; data-tg-on=&#39;Yeah!&#39; for=&#39;cb5&#39;></label>

  </span>

 

</body>

</html>

登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

使用CSS3实现模拟IOS滑动开关效果

如何使用CSS3配合IE滤镜实现渐变和投影的效果

以上是关于CSS3实现自定义Checkbox的特效的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板