制作css开关,纯css实现开关效果

大家好，我又来了，这次给大家表演使用纯css实现开关效果

首先是构思

我们使用标签来实现这个效果。

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

on:打开 off:关闭

未选中，则关闭开关

选中，则打开开关

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

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

off状态草图

on状态草图

.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;

}

然后我们将这两个草图放到label内

结合label和checkbox整理、优化css

.toggle-finish{

cursor:pointer;

display:inline-block;

position:relative;

height:25px;

width:50px;

border-radius:4px;

background:#CC0000;

}

.cookie-finish{

position:absolute;

left:2px;

top:2px;

bottom:2px;

width:50%;

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

border-radius:3px;

}

input:checked + .toggle-finish{

background:#66CC33;

}

input:checked + .toggle-finish .cookie-finish{

left:auto;

right:2px;

}

制作css开关,纯css实现开关效果相关推荐

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
html css 扑克牌桌面,CSS Card:纯css制作扑克牌_html/css_WEB-ITnose
制作扑克的html代码第一步是制作扑克的html,我的原则是用最少最简洁的代码,不引用任何图片,也许你认为不可能,但是你还是乖乖的看我是如何工作的吧. 建立一个div,赋予两个class属性:car ...
html如何制作小圆点,纯CSS实现小圆点和三角形图案
纯CSS制作三角形和小圆点 .arrowbox{width:40px;height:30px;background: #333;padding:10px;position: relative;text ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...

制作css开关,纯css实现开关效果

制作css开关,纯css实现开关效果相关推荐

最新文章

热门文章