CSS3网页开关-Switches代码

2024-09-05 12:18:50

字体：大中小

来源：转载

供稿：网友

Switches CSS3网页开关-CSS3代码，纯CSS3代码实现，非常漂亮的网页开关，像左右滑块滑动一样的功能，在Android手机上，这种效果见得最多了，以便开关某些功能。

<!DOCTYPE html><html><head><title>Switches网页开关-CSS3代码</title><style>html, body {height: 100%;}body {  background: linear-gradient(#f7f7f7, #e0e0e0);  margin: 0;}.wrap {  position: relative;  width: 33.33%;  margin: -72px 0;  top: 50%;  float: left;}label {  margin: 1.5em auto;}input {  position: absolute;  left: -9999px;}.slider-v1 {  position: relative;  display: block;  width: 5.5em;  height: 3em;  cursor: pointer;  border-radius: 1.5em;  transition: 350ms;  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd;  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);}.slider-v1::before {  position: absolute;  content: '';  width: 2em;  height: 2em;  top: 0.5em;  left: 0.5em;  border-radius: 50%;  transition: 250ms ease-in-out;  background: linear-gradient(#f5f5f5 10%, #eeeeee);  box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25);}.slider-v1::after {  position: absolute;  content: '';  width: 1em;  height: 1em;  top: 1em;  left: 6em;  border-radius: 50%;  transition: 250ms ease-in;  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #dddddd;  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.3);}input:checked + .slider-v1::after {  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #44cc66;  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12);}input:checked + .slider-v1::before {  left: 3em;}.slider-v2 {  position: relative;  display: block;  width: 5.5em;  height: 3em;  cursor: pointer;  border-radius: 1.5em;  transition: 350ms;  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd;  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);}.slider-v2::after {  position: absolute;  content: '';  width: 2em;  height: 2em;  top: 0.5em;  left: 0.5em;  border-radius: 50%;  transition: 250ms ease-in-out;  background: linear-gradient(#f5f5f5 10%, #eeeeee);  box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);}.slider-v2::before {  position: absolute;  content: '';  width: 4em;  height: 1.5em;  top: 0.75em;  left: 0.75em;  border-radius: 0.75em;  transition: 250ms ease-in-out;  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0;  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;}input:checked + .slider-v2::before {  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset;}input:checked + .slider-v2::after {  left: 3em;}.slider-v3 {  position: relative;  display: block;  width: 7em;  height: 3em;  cursor: pointer;  border-radius: 1.5em;  transition: 350ms;  background: #ddd;}.slider-v3::after {  position: absolute;  content: '';  width: 2em;  height: 2em;  top: 0.5em;  left: 0.5em;  border-radius: 1.5em;  transition: width 200ms ease-out, height 300ms 50ms ease-in, top 300ms 50ms ease-in, left 250ms 50ms ease-in, box-shadow 300ms ease-in;  background: #4c6;  box-shadow: 0 0 0 1.5em #f2f2f2 inset;}input:checked + .slider-v3::after {  width: 4em;  height: 3em;  top: 0;  left: 3em;  box-shadow: 0 0 0 0 #f2f2f2 inset;}  </style>  <script>    window.confirm = function(){};    window.prompt  = function(){};    window.open    = function(){};    window.print   = function(){};    // Support hover state for mobile.    if (false) {      window.ontouchstart = function(){};    }  </script></head><body>  <div class="wrap">  <input type="checkbox" id="s1" />  <label class="slider-v1" for="s1"></label>  <input type="checkbox" id="s2" checked="" />  <label class="slider-v1" for="s2"></label></div><div class="wrap">  <input type="checkbox" id="s3" />  <label class="slider-v2" for="s3"></label>  <input type="checkbox" id="s4" checked="" />  <label class="slider-v2" for="s4"></label></div><div class="wrap">  <input type="checkbox" id="s5" />  <label class="slider-v3" for="s5"></label>  <input type="checkbox" id="s6" checked="" />  <label class="slider-v3" for="s6"></label></div>  <script src=""></script>  <script>    if (document.location.search.match(/type=embed/gi)) {      window.parent.postMessage('resize', "*");    }  </script></body></html>

上一篇：HTML5 canvas 层拖动实例

下一篇：纯css3实现的折角效果(无需图片和js代码)