css实现checkbox昼夜切换按钮开关动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现checkbox昼夜切换按钮开关动画效果代码
代码标签: css checkbox 昼夜 切换 按钮 开关 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 0; min-height: 100vh; font-size: 12vmin; abackground: #123; } @property --circle { syntax: '<length>'; initial-value: 0px; inherits: false; } @property --night { syntax: '<length>'; initial-value: 0px; inherits: false; } @property --pos-y-ray1 { syntax: '<percentage>'; initial-value: 10%; inherits: false; } @property --pos-x-ray2 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-y-ray2 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-x-ray3 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-x-ray4 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-y-ray4 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-y-ray5 { syntax: '<percentage>'; initial-value: 90%; inherits: false; } @property --pos-x-ray6 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-y-ray6 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-x-ray7 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-x-ray8 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --pos-y-ray8 { syntax: '<length>'; initial-value: 1px; inherits: false; } @property --width-star1 { syntax: '<length>'; initial-value: 0px; inherits: false; } @property --width-star2 { syntax: '<length>'; initial-value: 0px; inherits: false; } @property --width-star3 { syntax: '<length>'; initial-value: 0px; inherits: false; } .toggle { --night: 0px; --circle: 0.14em; --pos-y-ray1: 10%; --pos-x-ray2: 0.65em; --pos-y-ray2: 0.175em; --pos-x-ray3: 0.725em; --pos-x-ray4: 0.65em; --pos-y-ray4: 0.62em; --pos-y-ray5: 90%; --pos-x-ray6: 0.225em; --pos-y-ray6: 0.62em; --pos-x-ray7: 0.125em; --pos-x-ray8: 0.225em; --pos-y-ray8: 0.175em; --width-star1: 0px; --width-star2: 0px; --width-star3: 0px; appearance: none; position: relative; font-size: 1em; width: 2em; aspect-ratio: 2; border: max(1px, 0.05em) solid; border-radius: 2em; background: /* sun */ radial-gradient(circle at 0.5em 50%, #0000 var(--circle), #000 0 calc(var(--circle) + 0.045em), #0000 0), radial-gradient(70% 50%, #000 99%, #0000) 0.475em var(--pos-y-ray1) / 0.04em 0.15em, linear-gradient(-45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray2) var(--pos-y-ray2) / 0.12em 0.12em, radial-gradient(50% 70%, #000 99%, #0000) var(--pos-x-ray3) 50% / 0.15em 0.04em, linear-gradient(45deg, #0000 38%, #000 0 62%, #0000 0) var(--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0