css如何实现开关效果


本文摘自PHP中文网,作者V,侵删。

首先是构思:

我们使用<input type="checkbox">标签来实现这个效果。

checkbox的选中、未选中的特性,刚好对应开关的打开、关闭

on:打开 off:关闭

1

2

3

4

5

6

7

8

9

<label for="ck2">

  <input type="checkbox" id="ck2">

  <span>未选中,则关闭开关</span>

</label>

<br>

<label for="ck1">

  <input type="checkbox" id="ck1" checked>

  <span>选中,则打开开关</span>

</label>

效果:

5c9130705213b1a036c5edc97913bd3.png

(推荐教程:CSS入门教程)

开始画出off、on状态的草图

这里要讲解一下,使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识

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

<P>off状态草图</P>

<div class="toggle">

  <div class="cookie"></div>

</div>

<br>

<P>on状态草图</P>

<div class="toggle2">

  <div class="cookie2"></div>

</div>

.toggle{

  display:inline-block;

  position:relative;

  height:25px;

  width:50px; 

  border-radius:4px;

  background:#CC0000;

}

.cookie{

  position:absolute;

  left:2px;

  top:2px;

  bottom:2px;

  width:50%;

  background:rgba(230,230,230,0.9);

  border-radius:3px;

}

.toggle2{

  display:inline-block;

  position:relative;

  height:25px;

  width:50px;

  padding:2px;

  border-radius:4px;

  background:#66CC33; 

}

.cookie2{

  position:absolute;

  right:2px;

  top:2px;

  bottom:2px; 

  width:50%;

  background:rgba(230,230,230,0.9);

  border-radius:3px;

}

效果:

2076b62d6aafd9e1f624050fcd5284e.png

阅读剩余部分

相关阅读 >>

深入了解css中的选择器

css如何做三角形

css中设置下划线的方法

css如何设置边框阴影

怎么使用css做图像透明

css sprites如何使用?

css中内边框是什么

html代码如何让照片变模糊

css怎么固定底部不动

css flex布局的优缺点是什么

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...