HTML+CSS+JS发光开关按钮

最新推荐文章于 2023-12-29 19:47:59 发布

suixin_erwei

最新推荐文章于 2023-12-29 19:47:59 发布

阅读量4.6k

点赞数

分类专栏： css 文章标签： html css3

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如图：

发光开关特效

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

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