CSS3立體開關，網頁開關超酷效果

2024-09-05 12:17:05

字體：大中小

來源：轉載

供稿：網友

CSS3代碼，測試請使用ie9，或火狐及Chrome等瀏覽器，立體開關效果是很多人喜歡的網頁特效，現在好多的智能手機上見到比較多的效果，用CSs3來實現，代碼要精簡不少，用傳統CSS也是可以實現的，只是比較麻煩一點。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3立體開關</title><script>var snd = new Audio('');document.addEventListener('change', function(e){	if(e.target.parentNode.className.indexOf('checkboxControl') != -1){		snd.currentTime = 0;		snd.play(); 	}});</script><style>*{ margin:0; padding:0; }html, body{ height:100%; }body{ font:15px/1 arial; text-align:center; background:#509DAD; }body:before{ content:''; display:inline-block; height:100%; vertical-align:middle; }fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; }.legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); }.legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; }.checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; }.checkboxControl{ border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597;box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset,-8px 0 5px -5px #02425C inset;-moz-user-select:none; -webkit-user-select:none; background:#80DCE9;}.checkboxControl input{ position:absolute; visibility:hidden; }.checkboxControl > div{ 	background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);	background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);	box-shadow:-2px 0 1px 0 #A6F2FE inset;	border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);			transform-origin:0 0; -webkit-transform-origin:0 0; 	transform:scaleX(0.93); -webkit-transform:scaleX(0.93);	transition:.1s; -webkit-transition:0.1s;	}.checkboxControl div:first-letter{ letter-spacing:55px; }	.checkboxControl :checked ~ div{ transform-origin:100% 0; -webkit-transform-origin:100% 0;box-shadow:2px 0 1px 0 #A6F2FE inset;background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);}.checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; }.checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); }.checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }.checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }.checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; }.checkboxControl2{ border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold;width:60px; height:100px; position:relative; margin:0 5px;color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);}.checkboxControl2 input{ position:absolute; visibility:hidden; }.checkboxControl2 > div{ background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);}.checkboxControl2 > div:after{ content:'Ο'; display:block; height:50%; line-height:4;transform-origin:0 0; -webkit-transform-origin:0 0;}.checkboxControl2 > div:before{ content:'Ι'; display:block; height:50%; line-height:2.5;border-radius:80%/5px;box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);transform-origin:0 100%; -webkit-transform-origin:0 100%; transform:scaleY(0.7); -webkit-transform:scaleY(0.7);}.checkboxControl2 :checked ~ div{ background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);}.checkboxControl2 :checked ~ div:before{ border-radius:0; box-shadow:none;transform:none; -webkit-transform:none;}.checkboxControl2 :checked ~ div:after{ border-radius:80%/5px;box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;transform:scaleY(0.7); -webkit-transform:scaleY(0.7);}.checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }.checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }.checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; }</style></head><body><fieldset>	<div   id="iwvjtn8m0"   class='legend'><span>power switchs</SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556482.html'>CSS word-wrap強制換行截斷長字符串</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556484.html'>CSS創建FaceBook風格的按鈕</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流