纯css实现checkbox开关切换美化效果代码
代码语言:html
所属分类:表单美化
代码描述:纯css实现checkbox开关切换美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-size: 1.8rem; font-family: sans-serif; background: #E0DFDB; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 30px, transparent 0, transparent 60px); padding: 1rem; } .content { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .checkbox-group { display: flex; flex-direction: row; gap: 0.75rem; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 0.3rem; padding: 5rem 3rem; box-shadow: 0 5px 5px #0005; } .toggle { display: flex; min-width: 6rem; height: 3rem; border-radius: 25rem; padding: 0.25rem; transition: background 0.3s ease; background-color: #bababa; position: relative; } .toggle::before { content: ""; position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; background-color: #444; transition: opacity 0.3s ease, transform 0.3s ease; } .toggle::after { content: ""; position: absolute; top: 50%; left: 0.85rem; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; background-color: #00ff94; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 45'%3E%3Cpath d='M48.7498 2.28142C51.3913 -0.359957 55.6739 -0.359921 58.3153 2.28153C60.7556 4.72181 60.9404 8.55699 58.8749 11.2134L58.8041 11.3044L58.3963 11.7663L27.5701 42.5925C25.1298 45.0327 21.2946 45.21.........完整代码请登录后点击上方下载按钮下载查看
网友评论0