效果如图:
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(/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;
}
}
}
}
}
内容转至网络,若侵权,联系删除