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

效果如图：

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;

}

}

}

}

}

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