CSS3 - CheakBox 开关效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Switch</title>

h1 {
color: #eee;
font: 30px Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
text-align: center;
margin-bottom: 50px;
}

input[type=checkbox] {
visibility: hidden;
}

/* SLIDE ONE */
.slideOne {
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideOne label {
display: block;
width: 16px;
height: 16px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;

-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;

.slideOne input[type=checkbox]:checked + label {
left: 37px;
}

/* SLIDE TWO */
.slideTwo {
width: 80px;
height: 30px;
background: #333;
margin: 20px auto;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;

.slideTwo:after {
content: '';
position: absolute;
top: 14px;
left: 14px;
height: 2px;
width: 52px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #111;

.slideTwo label {
display: block;
width: 22px;
height: 22px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;

.slideTwo label:after {
content: '';
position: absolute;
width: 10px;
height: 10px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #333;
left: 6px;
top: 6px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
}

.slideTwo input[type=checkbox]:checked + label {
left: 54px;
}

.slideTwo input[type=checkbox]:checked + label:after {
background: #00bf00;
}

/* SLIDE THREE */
.slideThree {
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;

.slideThree:after {
content: 'OFF';
font: 12px/26px Arial, sans-serif;
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.slideThree:before {
content: 'ON';
font: 12px/26px Arial, sans-serif;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
}

.slideThree label {
display: block;
width: 34px;
height: 20px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;

.slideThree input[type=checkbox]:checked + label {
left: 43px;
}

/* ROUNDED ONE */
.roundedOne {
width: 28px;
height: 28px;
background: #fcfff4;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}

.roundedOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;

background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;

.roundedOne label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* ROUNDED TWO */
.roundedTwo {
width: 28px;
height: 28px;
background: #fcfff4;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

.roundedTwo label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;

.roundedTwo label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.roundedTwo label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.roundedTwo input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* SQUARED ONE */
.squaredOne {
width: 28px;
height: 28px;
background: #fcfff4;

background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}

.squaredOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;

.squaredOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;

top: 2px;
left: 2px;

.squaredOne label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.squaredOne input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* SQUARED TWO */
.squaredTwo {
width: 28px;
height: 28px;
background: #fcfff4;

.squaredTwo label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;

.squaredTwo label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.squaredTwo label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.squaredTwo input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* SQUARED THREE */
.squaredThree {
width: 20px;
margin: 20px auto;
position: relative;
}

.squaredThree label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 4px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* SQUARED FOUR */
.squaredFour {
width: 20px;
margin: 20px auto;
position: relative;
}

.squaredFour label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 4px;

.squaredFour label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.squaredFour label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.5;
}

.squaredFour input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

</style>
</head>

<body>

<h1>CSS3 Checkbox Styles</h1>

<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" />
<label for="slideOne"></label>
</div>

<div class="slideTwo">
<input type="checkbox" value="None" id="slideTwo" name="check" />
<label for="slideTwo"></label>
</div>

<div class="slideThree">
<input type="checkbox" value="None" id="slideThree" name="check" />
<label for="slideThree"></label>
</div>

<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>

<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" />
<label for="roundedTwo"></label>
</div>

<div class="squaredOne">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"></label>
</div>

<div class="squaredTwo">
<input type="checkbox" value="None" id="squaredTwo" name="check" />
<label for="squaredTwo"></label>
</div>

<div class="squaredThree">
<input type="checkbox" value="None" id="squaredThree" name="check" />
<label for="squaredThree"></label>
</div>

<div class="squaredFour">
<input type="checkbox" value="None" id="squaredFour" name="check" />
<label for="squaredFour"></label>
</div>

</body>
</html>

CSS3 - CheakBox 开关效果的更多相关文章

Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
css3 iphone开关移动端开关、按钮、input
css3 iphone开关移动端开关.按钮.input <!DOCTYPE html> <html> <head> <meta charset=&quo ...
css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
第八十节，CSS3边框图片效果
CSS3边框图片效果学习要点: 1.属性初探 2.属性解释 3.简写和版本本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
自己定义控件：onDraw 方法实现仿 iOS 的开关效果
概述本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...

随机推荐

listen 61
Multiple Stresses Killed Snail Memory Stress sucks. It can affect your body and mind. Previous resea ...
dd备份文件系统
1.实现dd的备份: 使用gzip压缩: dd if=/dev/hdb | gzip > /local/path/image.gz 说明:/dev/hdb 是硬盘整盘.对不同的硬盘,可能是 /d ...
Mysql源码学习——源码目录结构
目录清单目录名注释 Bdb 伯克利DB表引擎 BUILD 构建工程的脚本 Client 客户端 Cmd-line-utils 命令行工具 Config 构建工程所需的一些文件 Dbug Fred ...
JavaScript总结（1）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
thinkpad取消fn键功能
转自:https://bbs.thinkpad.com/thread-1834235-1-1.html 1就是一直觉得fn建自动开启很烦人,于是百度后得到我们可以控制面板 -- 键盘--think ...
React-Redux之API
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 连接 React 组件与 Redux store. 连 ...
yii使用CFrom调用ajax失败的记录
在学习配置yii的CFrom的时候,发现怎么也不能让ajax生效,后来看文档后 ,终于发现了问题的所在. 问题配置文件如下 public function getUserConfig(){ retur ...
string行读入&&文件输入
普通读入的时候会以空格作为分隔符直接用cin>>s读入,此时可以直接处理文件尾的情况 text代码: #include <iostream>#include <cstd ...
linux消息队列相关操作
/* 发送消息队列 */ #include <stdio.h>#include <stdlib.h>#include <string.h>#include < ...
2.6用tr进行转换
tr可以对来自标准输入的内容进行字符替换.字符删除以及重复字符压缩.它可以将一组字符变成另一组字符,因而通常也被称为转换命令. 1.tr只能通过stdin(标准输入),而无法通过命令行参数来接受输入. ...

CSS3 - CheakBox 开关效果

CSS3 - CheakBox 开关效果的更多相关文章

随机推荐

热门专题