css实现黑夜白昼昼夜背景主题切换按钮开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现黑夜白昼昼夜背景主题切换按钮开关效果代码
代码标签: css 黑夜 白昼 昼夜 背景 主题 切换 按钮 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* 📣 Note: all sizes are in ems, so change the .toggle font-size to scale to whatever size you need. */ .toggle { font-size: 2rem; /* 👈 change this to scale */ border: .125em solid currentColor; border-radius: 2em; cursor: pointer; display: block; height: 2em; position: relative; width: 3.75em; } .toggle span { background-color: currentColor; border-radius: 2em; display: block; height: 1.5em; left: .25em; overflow: hidden; position: absolute; top: .25em; text-indent: -9999px; transition: left .25s; width: 1.5em; z-index: 2; } .toggle::before, .toggle::after { content: ''; display: block; border-radius: 1em; position: absolute; z-index: 1; } .toggle::after { box-shadow: .25em .25em #5901d8; height: 1.125em; right: .9em; top: .125em; width: 1.125em; } .toggle::before { background-color: #ffc409; height: .625e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0