div+css实现文字卡片列表暗黑亮色模式切换过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现文字卡片列表暗黑亮色模式切换过渡动画效果代码
代码标签: div css 文字 卡片 列表 暗黑 亮色 模式 切换 过渡
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Aboreto&display=swap"); * { box-sizing: border-box; } html { font-size: 6.25vmax; } @media (max-width: 992px) { html { font-size: 60px; } } body { min-height: 100vh; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: #222; background-color: #eee; font-size: 0.24rem; font-family: "Aboreto", sans-serif; } .card { width: 5rem; height: 1.8rem; padding: 0.3rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; line-height: 1.5; border: 1px solid; border-radius: 0.3rem; box-shadow: 3px 3px 0 3px #222; cursor: crosshair; overflow: hidden; } .arrow-btn { flex-shrink: 0; width: 0.7rem; height: 0.7rem; display: flex; justify-content: center; align-items: center; color: #eee; background-color: #222; border-radius: 50%; cursor: pointer; } .arrow-btn:before { content: "→"; } input[type=checkbox] { display: none; } input[type=checkbox]:checked ~ .dark-mode-mask { transform: scale(50); } input[type=checkbox]:checked ~ .toggle-btn { background-color: #fff; } .dark-mode-mask, .toggle-btn { position: fixed; bottom: 0.3rem; right: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; } .toggle-btn { display: flex; justify-content: center; al.........完整代码请登录后点击上方下载按钮下载查看
网友评论0