css实现自适应备忘录列表待办事项代码
代码语言:html
所属分类:布局界面
代码描述:css实现自适应备忘录列表待办事项代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet"> <style> :root { --gapSize: 0.6rem; --barSize: 0.3rem; --bulletSize: 0.6rem; --altBg: linear-gradient(#f7ff00, #db36a4); --bg: linear-gradient(#03001e, #7303c0, #ec38bc); } body { display: flex; height: 100vh; align-items: center; justify-content: center; background: var(--bg); font-family: 'Rubik'; } main { box-shadow: 0 0 15px rgba(0,0,0,0.23); background: #fff; border-radius: 10px; overflow: hidden; } header { position: relative; padding: 1.4rem 0; box-shadow: 0 1px 10px rgba(0,0,0,0.2); z-index: 1; } header h1 { margin: 0; text-align: center; background: var(--altBg) fixed; background-clip: text; -webkit-background-clip: text; color: transparent; } section ul { margin: 0; padding: 0; list-style: none; } section ul li { position: relative; padding: var(--gapSize) 1.4rem; --currentBg: #fff; } section ul li span { background: var(--altBg) fixed; background-clip: text; -webkit-background-clip: text; transition: all 200ms ease-in-out; } section ul li:hover > span { color: transparent; } section ul li:nth-child(odd) { background: #f5f5f5; --currentBg: #f5f5f5; } section ul li::before { content: ''; display: inline-block; width: var(--bulletSize); height: var(--bulletSize); border-radius: var(--bulletSize); margin-right: var(--bulletSize); vertical-align: middle; background: var(--bg) fixed; } section ul li::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(1.4rem + (var(--bulletSize) / 2) - (var(--barSize) / 2)); width: var(--barSize); background: var(--bg) fixed; } section ul li:first-child::after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0