CSS3立体智能手机开关，网页开关超酷效果

<!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=gb2312" />

<title>CSS3立体开关</title>

<script>

var snd = new Audio(‘‘);

document.addEventListener(‘change‘, function(e){

if(e.target.parentNode.className.indexOf(‘checkboxControl‘) != -1){

snd.currentTime = 0;

snd.play();

}

});

</script>

<style>

*{ margin:0; padding:0; }

html, body{ height:100%; }

body{ font:15px/1 arial; text-align:center; background:#509DAD; }

body:before{ content:‘‘; display:inline-block; height:100%; vertical-align:middle; }

fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; }

.legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); }

.legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; }

.checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; }

.checkboxControl{

border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597;

box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset,-8px 0 5px -5px #02425C inset;-moz-user-select:none; -webkit-user-select:none; background:#80DCE9;

}

.checkboxControl input{ position:absolute; visibility:hidden; }

.checkboxControl > div{

background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);

background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);

box-shadow:-2px 0 1px 0 #A6F2FE inset;

border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);

transform-origin:0 0; -webkit-transform-origin:0 0;

transform:scaleX(0.93); -webkit-transform:scaleX(0.93);

transition:.1s; -webkit-transition:0.1s;

}

.checkboxControl div:first-letter{ letter-spacing:55px; }

.checkboxControl :checked ~ div{

transform-origin:100% 0; -webkit-transform-origin:100% 0;

box-shadow:2px 0 1px 0 #A6F2FE inset;

background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);

background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);

}

.checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; }

.checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); }

.checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }

.checkboxControl .indicator:before{ content:‘‘; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }

.checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; }

.checkboxControl2{

border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold;

width:60px; height:100px; position:relative; margin:0 5px;

color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);

}

.checkboxControl2 input{ position:absolute; visibility:hidden; }

.checkboxControl2 > div{

background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);

background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);

height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);

}

.checkboxControl2 > div:after{

content:‘Ο‘; display:block; height:50%; line-height:4;

transform-origin:0 0; -webkit-transform-origin:0 0;

}

.checkboxControl2 > div:before{

content:‘Ι‘; display:block; height:50%; line-height:2.5;

border-radius:80%/5px;

box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);

transform-origin:0 100%; -webkit-transform-origin:0 100%;

transform:scaleY(0.7); -webkit-transform:scaleY(0.7);

}

.checkboxControl2 :checked ~ div{

background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);

background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);

}

.checkboxControl2 :checked ~ div:before{

border-radius:0; box-shadow:none;

transform:none; -webkit-transform:none;

}

.checkboxControl2 :checked ~ div:after{

border-radius:80%/5px;

box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;

transform:scaleY(0.7); -webkit-transform:scaleY(0.7);

}

.checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }

.checkboxControl2 .indicator:before{ content:‘‘; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }

.checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; }

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<fieldset>

<div class=‘legend‘><span>power switchs</span></div>

<div class=‘checkboxGroup‘>

<label class=‘checkboxControl‘>

<input type=‘checkbox‘ />

<div>ΟΙ</div><b></b>

<span class=‘indicator‘></span>

</label>

<label class=‘checkboxControl‘>

<input type=‘checkbox‘ />

<div>ΟΙ</div><b></b>

<span class=‘indicator‘></span>

</label>

</div>

<label class=‘checkboxControl2‘>

<input type=‘checkbox‘ />

<div></div>

<span class=‘indicator‘></span>

</label>

<label class=‘checkboxControl2‘>

<input type=‘checkbox‘ />

<div></div>

<span class=‘indicator‘></span>

</label>

</fieldset>

</body>

</html>

时间： 2024-11-23 12:35:36

CSS3立体智能手机开关，网页开关超酷效果的相关文章

超酷创意HTML5动画演示及代码

HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的. 在线演示        源码下载 用HTML5/CSS3给女朋友送个

CSS3实现的超酷超炫的立体开关效果

<!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-

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示 / 源码下载 2.CSS3动画下拉菜单 带动画图标 利用CSS3可以制作很多精

10款基于HTML5+CSS3实现的超酷源码动画

1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图片,同时还有HTML5表单字段的简单验证,CSS3的使用,让整个登录表单的投影显得更加立体. 在线演示 源码下载 2.很酷的CSS3多窗口邮件阅读器 这是一款非常炫酷华丽的CSS3邮件阅读器界面,它的特点是你可以同时点开多个邮件,而不必跳转页面.当你阅读完后可以点击关闭按钮关闭当前邮件的窗口.对于这

CSS3打造的超酷的多级扇形菜单

<!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>CSS3打造的超酷的多级扇形菜单丨梨花粉丨石家庄学前教育</title> <style> *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000

超酷 CSS3/HTML5 3D 飘带菜单实现教程

今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D的凸起效果,并且会改变菜单项的背景颜色,效果非常的酷,你可以从在线演示中查看这一效果. 你也可以在这里查看在线演示 下面我们来一起看看实现这款CSS3飘带菜单的具体过程以及源代码.源码主要由HTML代码和CSS代码组成,还比较简单. HTML代码: <div class=’ribbon’> <

8款超酷而实用的CSS3按钮动画

1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图标,并且在鼠标滑过这些按钮时,利用CSS3的动画特性出现滑动的动画效果. 在线演示 源码下载 2.HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮,按钮的外观比较一般,但它有两个特别的地方:一.按钮悬浮,整个按钮看上去像是悬浮在半空中一样,很立

【超酷超实用】CSS3可滑动跳转的分页插件制作教程

原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷,很适合一些个性化的个人网站使用,当然,这款分页插件也适合ajax翻页,效果都挺不错的.先来看看效果图: 怎么样,还挺酷的吧. 当然你也可以在这里查看插件的DEMO演示. 接下来我们来分享一下源码的实现思路,这里用到了jQuery UI框架,这么酷的滑杆是靠它实现的,不然,写的累死.. 首先是HTM

超酷MWC四轴飞行器DIY全套教程

本帖最后由 hitor 于 2013-8-17 22:06 编辑一.自己玩四轴的经历介绍.      各位模友大家好,我是哈工大航院的一名学生.我接触四轴的时间较早,由于我室友大二做科创就是做四轴的,那时候我们俩一人负责一个项目,他做四轴我做电动独轮车,我不太喜欢我的项目,烧了好多钱,最后也只能草草了事.我对四轴倒是很感兴趣,所以他一焊电路.写程序或是调试PID参数,我都像跟班似的死死的盯着他做的东西,有不懂的就向他请教,时间长了我也掌握了四轴的一些基本知识.几个月前我突发了做四轴的想法,但我不