CSS特效---纯CSS实现点击切换按钮

1、演示

2、一切尽在代码中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;background-color: #0e5271;}span {display: inline-block;width: 600px;height: 300px;background-color: #ccc;border-radius: 160px;margin: 100px auto;padding: 10px;transition: 0.3s all ease-in-out;}span::after {position: absolute;content: "";width: 300px;height: 300px;border-radius: 50%;background-color: #fff;transition: 0.3s all ease-in-out;}input[type="checkbox"]:checked + span {background-color: greenyellow;}input[type="checkbox"]:checked + span::after {transform: translateX(300px);}input[type="checkbox"] {display: none;}input[type="checkbox"]:active + span::after {width: 350px;}input[type="checkbox"]:checked:active + span::after {transform: translateX(250px);}</style></head><body><label for="toggle"><input type="checkbox" id="toggle" /><span></span></label></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/810977.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！