css3 滑动开关按钮 圆形

CSS3中提供了许多酷炫的样式设计，其中最为人所知的是滑动开关按钮和圆形设计。

/* 定义滑动开关按钮 */.switch {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 34px;
    margin: 0 10px;
}
.switch input {
     display: none;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}
input:checked + .slider {
    background-color: #2196F3;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
/* 定义圆形样式 */.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FF9966;
}
    

通过上述CSS代码，我们成功创建了滑动开关按钮和圆形的样式。需要注意的是，我们必须为按钮的不同状态分别定义样式，因为它们在不同状态下的显示效果是不同的。

使用CSS3的滑动开关按钮和圆形样式，可以让我们的网站更加美观和富有创意。借助这些强大的设计工具，我们的网页设计能力也得到了空前的提升！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！