css+svg实现checkbox白天黑夜切换开关美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css+svg实现checkbox白天黑夜切换开关美化效果代码
代码标签: css svg checkbox 白天 黑夜 切换 开关 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } label { width: 500px; height: 200px; position: relative; display: block; background: #ebebeb; border-radius: 200px; box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px -5px 15px rgba(255, 255, 255, 0.4); cursor: pointer; transition: 0.3s; } label:after { content: ""; width: 180px; height: 180px; position: absolute; top: 10px; left: 10px; background: linear-gradient(180deg, #ffcc89, #d8860b); border-radius: 180px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); transition: 0.3s; } label svg { position: absolute; width: 120px; top: 40px; z-index: 100; } label svg.sun { left: 40px; fill: #fff; transition: 0.3s; } label svg.moon { left: 340px; fill: #7e7e7e; transition: 0.3s; } input { width: 0; height: 0; visibility: hidden; } input:checked + label { background: #242424; } input:checked + label:after { left: 490px; transform: translateX(-100%); background: linear-gradient(180deg, #777, #3a3a3a); } input:checked + label svg.sun { fill: #7e7e7e; } input:checked + label svg.moon { fill: #fff; } input:checked + label + .background { background: #242424; } input:active:after { width: 260px; } .background { width: 100vw; height: 100vh; background: #fff; z-index: -1; position: absolute; transition: 0.3s; } </style> </head> <body > <input type="checkbox" id="darkmode-toggle" /> <label for="darkmode-toggle"> <svg version="1.1" class="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve"> <rect x="152.994" y="58.921" transform="matrix(0.3827 0.9239 -0.9239 0.3827 168.6176 -118.5145)" width="40.001" height="16" /> <rect x="46.9" y="164.979" transform="matrix(0.9239 0.3827 -0.3827 0.9239 71.29 -12.4346)" width="40.001" height="16" /> <rect x="46.947" y="315.048" transform="matrix(0.9239 -0.3827 0.3827 0.9239 -118.531 50.2116)" width="40.001" height="16" /> <rect x="164.966" y="409.112" transform="matrix(-0.9238 -0.3828 0.3828 -0.9238 168.4872 891.7491)" width="16" height="39.999" /> <rect x="303.031" y="421.036" transform="matrix(-0.3827 -0.9239 0.9239 -0.3827 50.2758 891..........完整代码请登录后点击上方下载按钮下载查看
网友评论0