Html
    Css
    Js

    
                        
/*红色*/
.Ellipse1{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle1{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle1:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*蓝色*/
.Ellipse2{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle2{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle2:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*绿色*/
.Ellipse3{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle3{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle3:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*橙色*/
.Ellipse4{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle4{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle4:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*黄色*/
.Ellipse5{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle5{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle5:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*紫色*/
.Ellipse6{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle6{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle6:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*青色*/
.Ellipse7{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle7{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle7:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

七彩开关按钮

七彩开关按钮,每一个都是独立的,直接可以引用。纯html+css+js代码,不需要图片做的按钮开关特效。希望大家喜欢!

3
      Summer Lover0
      2017/7/5 16:44:41

      个人建议把点击事件绑定到外层div上体验会更好

      回复
      球爱帅0
      2017/5/26 9:14:15

      强迫症,,,,,这开关只能开,不能关呀,哈哈

          ?・?・?1
          2017/5/26 9:30:04

          点击圆的部分,可以关

      回复