/*红色*/ .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代码,不需要图片做的按钮开关特效。希望大家喜欢!