白天与黑夜切换效果
代码语言:html
所属分类:动画
代码描述:主要通过js修改对象的class来实现切换动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { --bg: #f4f4f4; display: flex; justify-content: center; align-items: center; margin: 0; height: 100vh; background: var(--bg); transition: background 400ms ease; } body.darkmode { --bg: #222; } svg { width: 90vmin; height: 90vmin; } /** light mode */ .darkmode-icon .moon-shadow { transition: cx 400ms ease; } .darkmode-icon .rays { transition: stroke-dashoffset 400ms ease; stroke-dashoffset: 0; stroke-dasharray: 12; } /** dark mode */ .darkmode-checkbox:checked ~ label { cursor: pointer; } .darkmode-checkbox:checked ~ label .darkmode-icon .moon-shadow { cx: 40; } .darkmode-checkbox:checked ~ label .darkmode-icon .rays, .darkmode-checkbox:checked ~ label .darkmode-icon .sun-stroke { stroke: #777; } .darkmode-checkbox:checked ~ label .darkmode-icon .rays { stroke-dashoffset: -12; stroke-dasharray: 12; } .darkmode-checkbox { display: none; } </style> </head> <body translate="no"> <input class="darkmode-checkbox" id="darkMode" type="checkbox"> <label for="darkMode"> <svg class="darkmode-icon" viewBox="0 0 64 64"> <clipPath id="sun"> <circle cx="32" cy="32" r="12" stroke="#777" /> </clipPath> <circle class="sun" cx=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0