专注前端，专注网页设计分享 - (网页制作/模板制作/设计)755150799 织梦模板 | 网页特效 | 网站模板 | 建站教程 | Tag标签 | 联系站长

当前位置:首页 > 网页特效>CSS样式

纯CSS3滑杆开关按钮切换效果样式

发布时间：2014-05-08 10:42:46　来源/作者：学技巧网页制作　分类：CSS样式阅读：0次点评一下

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS3滑杆开关按钮切换效果样式</title> <link rel="stylesheet" href="http://www.xuejiqiao.com/demo/3/huagan.css" media="screen" type="text/css" /> </head> <body> <span class="switch"> <span class="switch-border1"> <span class="switch-border2"> <input id="switch1" type="checkbox" checked /> <label for="switch1"></label> <span class="switch-top"></span> <span class="switch-shadow"></span> <span class="switch-handle"></span> <span class="switch-handle-left"></span> <span class="switch-handle-right"></span> <span class="switch-handle-top"></span> <span class="switch-handle-bottom"></span> <span class="switch-handle-base"></span> <span class="switch-led switch-led-green"> <span class="switch-led-border"> <span class="switch-led-light"> <span class="switch-led-glow"></span> </span> </span> </span> <span class="switch-led switch-led-red"> <span class="switch-led-border"> <span class="switch-led-light"> <span class="switch-led-glow"></span> </span> </span> </span> </span> </span> </span> <span class="switch"> <span class="switch-border1"> <span class="switch-border2"> <input id="switch2" type="checkbox" /> <label for="switch2"></label> <span class="switch-top"></span> <span class="switch-shadow"></span> <span class="switch-handle"></span> <span class="switch-handle-left"></span> <span class="switch-handle-right"></span> <span class="switch-handle-top"></span> <span class="switch-handle-bottom"></span> <span class="switch-handle-base"></span> <span class="switch-led switch-led-green"> <span class="switch-led-border"> <span class="switch-led-light"> <span class="switch-led-glow"></span> </span> </span> </span> <span class="switch-led switch-led-red"> <span class="switch-led-border"> <span class="switch-led-light"> <span class="switch-led-glow"></span> </span> </span> </span> </span> </span> </span> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

纯CSS3滑杆开关切换按钮特效

纯CSS3滑杆开关切换按钮是一款纯CSS3实现的滑杆开关切换按钮动画，这个按钮是一个摇杆，杆子推上推下来切换开关状态，不同的开关状态也有不同颜色的指示灯(绿色和红色)。是一款很不错的css特效。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

相关网页特效

发表评论：

网页特效无法想象的JS效果

网页特效代码推荐

CSS的div块各种边框样式定义

分类：CSS样式

2014-09-15 16:51:45
CSS实现按钮及线呼吸灯效果

分类：CSS样式

2014-09-15 16:38:07
CSS制作凹圆环特效

分类：CSS样式

2014-09-15 16:30:24
用CSS样式实现箭头效果代码

分类：CSS样式

2014-09-13 10:06:14
通过CSS3实现的精美折角特效代码

分类：CSS样式

2014-07-28 11:39:20

一定有你需要的

联系我们| 关于我们| 版权声明| 帮助中心| 模板定制| 百度新闻| 网站地图|百度地图|

声明：本站所有模板/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢合作！

本站专业提供网站模板，网页模板，CMS模板，模板教程，网站制作，程序插件，织梦模板等建站模板,教程等最专业的建站资源，打造专业的Web交流平台！

Copyright © 2013-2014 学技巧网站制作 All Rights Reserved. www.xuejiqiao.com | 京ICP备13040875号-1