太极（可复制源代码）大熊1年前发布20<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极</title> <link rel="stylesheet" href="./99-太极.css"> </head> <body> <div id="toggle" class="toggle"> <div class="toggle__black"></div> <div class="toggle__white"></div> </div> </body> <script src="./99-太极.js"></script> </html>:root { --first-half: 65%; } body { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 0; background-color: #6d8d9d; overflow: hidden; } .toggle { position: relative; display: flex; justify-content: space-between; width: 20rem; height: 10rem; border-radius: 5rem; background: linear-gradient(0deg, #222, #222 50%, #fff 50%, #fff 100%); background-size: 18rem 100%; background-position: 1rem 0; background-repeat: no-repeat; cursor: pointer; overflow: hidden; transition: all 0.5s ease; } .toggle:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5rem; box-shadow: inset 0 0.1rem 0.4rem 0 black; outline: 1rem solid #6d8d9d; z-index: 1; transition: all 0.5s ease; } .toggle:hover:before { box-shadow: inset 0 0.1rem 0.6rem 0 black; } .toggle__black, .toggle__white { position: relative; height: 100%; } .toggle__black:before, .toggle__white:before { content: ""; position: absolute; border-radius: 50%; } .toggle__black { width: var(--first-half); background-color: #222; border-radius: 0 5rem 0 0; transition: all 0.5s ease; } .toggle__black:before { top: 25%; left: calc(50% - 1.5rem); width: 3rem; height: 3rem; background-color: #fff; transition: all 0.5s ease; } .toggle__white { width: calc(100% - var(--first-half)); background-color: #fff; border-radius: 0 0 0 3rem; transition: all 0.5s ease; } .toggle__white:before { bottom: 25%; left: calc(50% - 0.75rem); width: 1.5rem; height: 1.5rem; background-color: #222; transition: all 0.5s ease; } .toggle--active { --first-half: 35%; } .toggle--active .toggle__black { border-radius: 0 3rem 0 0; } .toggle--active .toggle__black:before { left: calc(50% - 0.75rem); width: 1.5rem; height: 1.5rem; } .toggle--active .toggle__white { border-radius: 0 0 0 5rem; } .toggle--active .toggle__white:before { left: calc(50% - 1.5rem); width: 3rem; height: 3rem; }const toggleElement = document.getElementById("toggle"); toggleElement.addEventListener("click", () => { toggleElement.classList.toggle("toggle--active"); }); 温馨提示：本文最后更新于2024-10-03 22:29:19，某些文章具有时效性，若有错误或已失效，请私信客服或联系网创熊站长。© 免责声明 版权声明 1本网站名称：网创熊 2本站永久网址：https://www.wyuuu.cn 3本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服微信：Dax2367 进行删除处理。 4本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。 5本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报 6本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
