效果如图：

index.html

纯CSS3实现发光开关切换按钮DEMO演示index2.html

Switch Button #3 - CodePen

style.css

*,

*:before,

*:after {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

background-color: #1c1d1f;

}

.button {

display: block;

width: 400px;

height: 120px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background-color: #000000;

box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;

border-radius: 20px;

overflow: hidden;

cursor: pointer;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.button span {

display: block;

position: absolute;

top: 6px;

width: 194px;

height: 108px;

background-color: #1c1d1f;

-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;

transition: transform 300ms ease, box-shadow 300ms ease;

}

.button span:before {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

font-family: "Open Sans";

font-weight: 800;

font-size: 48px;

-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

}

.button span:after {

content: "";

width: 4px;

height: 108px;

position: absolute;

top: 0;

background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

-webkit-transition: opacity 300ms ease;

transition: opacity 300ms ease;

}

.button span:first-of-type {

left: 6px;

border-top-left-radius: 18px;

border-bottom-left-radius: 18px;

-webkit-transform-style: preserve3d;

transform-style: preserve3d;

-webkit-transform-origin: right center;

-ms-transform-origin: right center;

transform-origin: right center;

-webkit-transform: perspective(2000px) rotateY(40deg);

transform: perspective(2000px) rotateY(40deg);

box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);

}

.button span:first-of-type:before {

content: "ON";

color: rgba(0, 0, 0, 0.5);

text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;

}

.button span:first-of-type:after {

left: -1px;

}

.button span:last-of-type {

right: 6px;

border-top-right-radius: 18px;

border-bottom-right-radius: 18px;

-webkit-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;

box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;

}

.button span:last-of-type:before {

content: "OFF";

color: #ff4847;

text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);

}

.button span:last-of-type:after {

right: -1px;

opacity: 0;

}

.button input[type="checkbox"] {

display: none;

}

.button input[type="checkbox"]:checked ~ span:first-of-type {

-webkit-transform: none;

-ms-transform: none;

transform: none;

box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;

}

.button input[type="checkbox"]:checked ~ span:first-of-type:before {

color: #93c913;

text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);

}

.button input[type="checkbox"]:checked ~ span:first-of-type:after {

opacity: 0;

}

.button input[type="checkbox"]:checked ~ span:last-of-type {

-webkit-transform: perspective(2000px) rotateY(-40deg);

transform: perspective(2000px) rotateY(-40deg);

box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);

}

.button input[type="checkbox"]:checked ~ span:last-of-type:before {

color: rgba(0, 0, 0, 0.5);

text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;

}

.button input[type="checkbox"]:checked ~ span:last-of-type:after {

opacity: 1;

}style.less

@background: #1C1D1F;

@button: #1C1D1F;

@light-on: #93C913;

@light-off: #FF4847;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

*,

*:before,

*:after {

box-sizing: border-box

}

body {

background-color: @background;

}

.button {

display: block;

width: 400px;

height: 120px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: darken(@button, 50%);

box-shadow: 0 -1px 0 fade(white, 20%) inset;

border-radius: 20px;

overflow: hidden;

cursor: pointer;

-webkit-tap-highlight-color: fade(black, 0%);

span {

display: block;

position: absolute;

top: 6px;

width: 194px;

height: 108px;

background-color: @button;

transition:

transform 300ms ease,

box-shadow 300ms ease;

&:before {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-family: "Open Sans";

font-weight: 800;

font-size: 48px;

transition:

text-shadow 800ms ease 100ms,

color 800ms ease 100ms;

}

&:after {

content: "";

width: 4px;

height: 108px;

position: absolute;

top: 0;

background: radial-gradient(ellipse at center, fade(white, 50%) 0%, transparent 50%);

transition: opacity 300ms ease;

}

&:first-of-type {

left: 6px;

border-top-left-radius: 18px;

border-bottom-left-radius: 18px;

transform-style: preserve3d;

transform-origin: right center;

transform:

perspective(2000px)

rotateY(40deg);

box-shadow:

-1px 0 1px fade(white, 10%) inset,

4px 0 8px fade(white, 10%) inset,

1px 0 0 fade(white, 10%) inset,

-10px 0 8px fade(lighten(@button, 5%), 90%),

-20px 0 8px fade(@button, 70%),

-30px 0 8px fade(@button, 40%);

&:before {

content: "ON";

color: fade(black, 50%);

text-shadow:

1px 4px 6px @button,

0 0 0 black,

1px 4px 6px @button;

}

&:after {

left: -1px;

}

}

&:last-of-type {

right: 6px;

border-top-right-radius: 18px;

border-bottom-right-radius: 18px;

transform-origin: left center;

box-shadow:

-1px 1px 1px fade(white, 10%) inset,

2px 0 2px fade(white, 5%) inset;

&:before {

content: "OFF";

color: @light-off;

text-shadow: 0 0 24px fade(@light-off, 60%);

}

&:after {

right: -1px;

opacity: 0;

}

}

}

input[type="checkbox"] {

display: none;

&:checked ~ span {

&:first-of-type {

transform: none;

box-shadow:

1px 1px 1px fade(white, 10%) inset,

-2px 0 2px fade(white, 5%) inset;

&:before {

color: @light-on;

text-shadow: 0 0 24px fade(@light-on, 60%);

}

&:after {

opacity: 0;

}

}

&:last-of-type {

transform:

perspective(2000px)

rotateY(-40deg);

box-shadow:

1px 0 1px fade(white, 10%) inset,

-4px 0 8px fade(white, 10%) inset,

-1px 0 0 fade(white, 10%) inset,

10px 0 8px fade(lighten(@button, 5%), 90%),

20px 0 8px fade(@button, 70%),

30px 0 8px fade(@button, 40%);

&:before {

color: fade(black, 50%);

text-shadow:

1px 4px 6px @button,

0 0 0 #000,

1px 4px 6px @button;

}

&:after {

opacity: 1;

}

}

}

}

}

内容转至网络，若侵权，联系删除

按钮自动发光用html怎么弄,HTML+CSS+JS发光开关按钮相关推荐

  1. HTML+css+js萤火虫动态按钮

    HTML+css+js萤火虫动态按钮(学习日志) 利用简单的代码写一个让人眼前一亮的效果,注意选暗一点的背景图片效果更加. <!DOCTYPE html> <html lang=&q ...

  2. html+css+js涟漪效果按钮 点击泛起涟漪

    效果如果 代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  3. button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例

    不话不多说了,直接上代码吧: 获取选中行数据 获取选中数目 验证是否全选 提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...

  4. html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...

  5. 腾讯微博——点击按钮自动加关注代码

    腾讯微博点击按钮自动加关注: <iframe id="previewmc" src="http://follow.v.t.qq.com/index.php?c=fo ...

  6. jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能

    [目录] 明确需求 html分析 代码实现 css分析 js分析 代码实现 只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求 为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...

  7. H5+css+js前端特效源代码：发光动画按钮：上传按钮

    前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能 效果展示 源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...

  8. 叮咚同城小程序问题：点击发布信息按钮自动闪退到首页的解决方法

    叮咚同城小程序问题:点击发布信息按钮自动闪退到首页的解决方法 是因为没有登录,授权登录后,该问题就解决了

  9. Android中实现按钮自动点击

    在Android项目中,有时候是利用按钮来更新消息,但是想要自动更新就需要设置按钮自动点击,前面声明和关联按钮控件就不说了 代码如下: button1.performClick(); 也算写项目中学到 ...

最新文章

  1. SQLServer中利用NTILE函数对数据进行分组的一点使用
  2. 第一天--来个占位符，让自己有一席之地
  3. 9 Redis 持久化AOF
  4. linux实验串行端口程序设计,Linux下串口编程心得(转)
  5. 织梦首页html在哪儿,dedecms织梦首页去index.html
  6. c语言期末考试复习题
  7. 使用zlib库实现gzip格式压缩
  8. 牛客国庆集训派对Day1: K. Tengen Toppa Gurren Lagann（贪心）
  9. 计算机组成辅存的概念,计算机组成原理概念
  10. 史上最强三千六百道脑筋急转弯(6)
  11. Linux PCI和PCIe总线
  12. win10图片打不开无法注册包
  13. wampserver安装错误 应用程序无法正常启动0xc000007b解决方法
  14. 选购家用安防摄像头，考虑室内还是室外，无线还是有线
  15. xcode更新一直失败的解决办法
  16. 关于this.name=name的理解
  17. “嗲”上海文化,女人需要学会的4种气质
  18. 不熟悉的四级核心词汇（三）
  19. 狗屁不通文章生成器Java版
  20. 【报错fatal: unable to access ‘https://github解决办法】

热门文章

  1. node版本管理工具nvm
  2. 国家知识产权局一行走访易保全调研区块链，提升相关专利审查工作质效
  3. 同花顺_知识_看盘技法
  4. 移动端跨平台开发Flutter 与 React Native对比
  5. 7.3 写一个判断素数的函数，在主函数输入一个整数，输出是否为素数的信息。
  6. linux系统搭建论坛,Linux下搭建discuz论坛
  7. APP开发流程工作详解
  8. 卷积神经网络---卷积层、激励层、池化层以及全连接层
  9. 想要秒变“优牙人”，只需要uya.ren
  10. 如何在mysql官网下载mysql最新或者以前的版本