/*红色*/
.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);
}七彩开关按钮,每一个都是独立的,直接可以引用。纯html+css+js代码,不需要图片做的按钮开关特效。希望大家喜欢!