HTML+CSS+JS发光开关按钮

来源：互联网发布：淘宝如何买到正品编辑：程序博客网时间：2024/05/29 19:56

效果如图：

发光开关特效

index.html

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>纯CSS3实现发光开关切换按钮DEMO演示</title>    <link rel="stylesheet" href="style.css" media="screen" type="text/css" /></head><body style="background-color: #1c1d1f;">  <div style="text-align:center;clear:both"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div>      <iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe></body></html>

index2.html

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>Switch Button #3 - CodePen</title>    <link rel="stylesheet" href="style.css" media="screen" type="text/css" /></head><body>  <label class="button"><input type="checkbox"><span></span><span></span></input></label>  <script src="js/index.js"></script></body></html>

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;        }      }    }  }}

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

阅读全文

0 0