css实现简洁代办任务管理代码
代码语言:html
所属分类:布局界面
代码描述:css实现简洁代办任务管理代码,可进行分类,移除、背景模糊、编辑等操作。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.5.css"> <style> #main:has(#task-1:checked) { --task-1: 1; } #main:has(#task-1:checked) #item-1 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-2:checked) { --task-2: 1; } #main:has(#task-2:checked) #item-2 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-3:checked) { --task-3: 1; } #main:has(#task-3:checked) #item-3 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-4:checked) { --task-4: 1; } #main:has(#task-4:checked) #item-4 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-5:checked) { --task-5: 1; } #main:has(#task-5:checked) #item-5 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-6:checked) { --task-6: 1; } #main:has(#task-6:checked) #item-6 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-7:checked) { --task-7: 1; } #main:has(#task-7:checked) #item-7 { height: 0rem; margin-bottom: 0; opacity: 0.3; } #main:has(#task-8:checked) { --task-8: 1; } #main:has(#task-8:checked) #item-8 { height: 0rem; margin-bottom: 0; opacity: 0.3; } body { margin: 0; font-family: "Inter", sans-serif; background-color: #040a24; } #main:has(#show-finished:checked) #list > li { height: 100px; margin-bottom: 0.4rem; } #wrapper { --color-code: 0, 26, 188; --color-design: 78, 186, 177; --color-other: 193, 88, 200; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 2000px; padding-top: 8rem; padding-bottom: 8rem; } #wrapper h1 { font-size: 3.25rem; line-height: 1.2; transform: translateZ(20px); } #wrapper h2 { font-size: 1.125rem; padding-top: 2.5rem; transform: translateZ(10px); } #wrapper h6 { font-size: 1rem; opacity: 0.6; padding-bottom: 2.5rem; transform: translateZ(10px); } #wrapper h1, #wrapper h2, #wrapper h6 { color: #fff; font-weight: bold; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); margin: 0; transform-style: preserve-3d; } .task-checkbox { display: flex; justify-content: center; align-items: center; border: 1px solid #bababa; appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 4px; transition: background-color 0.15s; margin-right: 1rem; cursor: pointer; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05); } .task-checkbox::after { transform: translateY(0.1rem); opacity: 0; transition: 0.15s; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.1' height='11.2' viewBox='0 0 14.1 11.2' style='enable-background:new 0 0 14.1 11.2' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23fff' d='M5.1 11.2 0 6.1 2.1 4l3 2.9L12 0l2.1 2.1z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .task-checkbox:checked { background-color: #bababa; } .task-checkbox:checked::after { opacity: 1; } #card { display: flex; flex-direction: column; width: 25rem; height: 45rem; position: relative; background-color: #f7f7f7; border-radius: 2rem; } #card::after { content: ""; position: absolute; width: calc(100% - 2.5rem); height: 1.5rem; background: linear-gradient(0deg, #f7f7f7, transparent); bottom: 0.8rem; pointer-events: none; left: 8px; right: 8px; margin: auto; border-radius: 1rem; transform-style: preserve-3d; transform: translateZ(40px); } #header { flex-grow: 1; flex-shrink: 0; height: 18rem; position: relative; border-radius: 2rem; box-shadow: 0px 0px 3rem rgba(0, 0, 0, 0.5); margin-bottom: 0.5rem; z-index: 1; transform: translateZ(40px); background-blend-mode: multiply; background: #253abc url(//repo.bfw.wiki/bfwrepo/image/634f71a6d2293.png); background-size: cover; background-position: center; } #header .title { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-left: 2.5rem; padding-right: 2.5rem; position: relative; z-index: 1; } #main { --count: calc(var(--task-1, 0) + var(--task-2, 0) + var(--task-3, 0) + var(--task-4, 0) + var(--task-5, 0) + var(--task-6, 0) + var(--task-7, 0) + var(--task-8, 0) + 0); counter-reset: css-counter var(--count, 0); height: 27rem; padding: 0.8rem; position: relative; overflow: hidden; transform: translateZ(40px); border-radius: 2rem; } #main::before { content: counter(css-counter); position: absolute; font-weight: bold; font-size: 0.875rem; margin-left: 0.4rem; } #main::after { content: ""; position: absolute; height: 1.2rem; background: linear-gradient(180deg, #f7f7f7, transparent); top: 2.25rem; pointer-events: none; width: calc(100% - 2.5rem); right: 0; left: 0; margin: auto; } #stats { margin-left: 1rem; display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 1rem; margin-left: 1.4rem; } #stats label { display: flex; justify-content: center; align-items: center; cursor: pointer; } #stats label span { margin-right: 0.5rem; } #stats label input { appearance: none; width: 26px; height: 16px; background-color: rgba(6, 18, 64, 0.3); border-radius: 2rem; position: relative; display: inherit; align-items: inherit; } #stats label input:checked { background-color: #061240; } #stats label input:checked::after { left: 12px; } #stats label input::after { height: 12px; width: 12px; content: ""; background-color: #fff; border-radius: 50%; position: absolute; left: 2px; transition: 0.15s; } #list { height: calc(100% - 2.5rem); overflow: auto; padding: 0; margin-top: 0; border-bottom-right-radius: 2.5rem; border-bottom-left-radius: 2.5rem; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; scrollbar-width: thin; } #list > li { margin: 0.4rem; margin-top: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 0.5rem; height: 100px; transition: 1s; overflow: hidden; } #list:has(.menu-checkbox:checked) .task { filter: blur(5px); pointer-events: none; } #list:has(#item-1 .menu-checkbox:checked) #item-1 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-1-badge-code:checked) #item-1 .badge-code { display: inline-flex; } #list:has(#task-1-badge-design:checked) #item-1 .badge-design { display: inline-flex; } #list:has(#task-1-badge-other:checked) #item-1 .badge-other { display: inline-flex; } #list:has(#item-2 .menu-checkbox:checked) #item-2 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-2-badge-code:checked) #item-2 .badge-code { display: inline-flex; } #list:has(#task-2-badge-design:checked) #item-2 .badge-design { display: inline-flex; } #list:has(#task-2-badge-other:checked) #item-2 .badge-other { display: inline-flex; } #list:has(#item-3 .menu-checkbox:checked) #item-3 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-3-badge-code:checked) #item-3 .badge-code { display: inline-flex; } #list:has(#task-3-badge-design:checked) #item-3 .badge-design { display: inline-flex; } #list:has(#task-3-badge-other:checked) #item-3 .badge-other { display: inline-flex; } #list:has(#item-4 .menu-checkbox:checked) #item-4 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-4-badge-code:checked) #item-4 .badge-code { display: inline-flex; } #list:has(#task-4-badge-design:checked) #item-4 .badge-design { display: inline-flex; } #list:has(#task-4-badge-other:checked) #item-4 .badge-other { display: inline-flex; } #list:has(#item-5 .menu-checkbox:checked) #item-5 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-5-badge-code:checked) #item-5 .badge-code { display: inline-flex; } #list:has(#task-5-badge-design:checked) #item-5 .badge-design { display: inline-flex; } #list:has(#task-5-badge-other:checked) #item-5 .badge-other { display: inline-flex; } #list:has(#item-6 .menu-checkbox:checked) #item-6 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-6-badge-code:checked) #item-6 .badge-code { display: inline-flex; } #list:has(#task-6-badge-design:checked) #item-6 .badge-design { display: inline-flex; } #list:has(#task-6-badge-other:checked) #item-6 .badge-other { display: inline-flex; } #list:has(#item-7 .menu-checkbox:checked) #item-7 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-7-badge-code:checked) #item-7 .badge-code { display: inline-flex; } #list:has(#task-7-badge-design:checked) #item-7 .badge-design { display: inline-flex; } #list:has(#task-7-badge-other:checked) #item-7 .badge-other { display: inline-flex; } #list:has(#item-8 .menu-checkbox:checked) #item-8 .popup { transform: translateY(0rem); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); pointer-events: all; } #list:has(#task-8-badge-code:checked) #item-8 .badge-code { display: inline-flex; } #list:has(#task-8-badge-design:checked) #item-8 .badge-design { display: inline-flex; } #list:has(#task-8-badge-other:checked) #item-8 .badge-other { display: inline-flex; } #list::-webkit-scrollbar { width: 0.25em; height: 0.25rem; } #list::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 2rem; } #list::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); } #list::-webkit-scrollbar-corner { background-color: transparent; } .task { background-color: #fff; padding-left: 1rem; padding-right: 1rem; display: block; border-radius: 0.5rem; color: rgba(0, 0, 0, 0.8); transition: 0.25s; height: 100%; } .task .description { display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem; position: relative; } .task .description .action { display: flex; } .task .description .action input[type=text] { border-radius: 0.25rem; padding: 0.15rem 0.25rem; margin-top: -3px; margin-left: -5px; font-size: 1rem; position: relative; font-family: Inter, sans-serif; width: calc(100% - 3.5rem); border-color: transparent; border-width: 1px; transition: 0.15s; } .task .description .action input[type=text]:hover { border-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.025); } .task .info { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 0.75rem; padding-bottom: 0.75rem; margin-left: 2rem; font-size: 0.75rem; display: flex; justify-content: space-between; } .task .info .date { margin-right: 1rem; } .task .info .badges .badge { display: none; padding: 2px 8px; border-radius: 1rem; text-transform: uppercase; font-weight: bold; font-size: 11px; } .task .info .badges .badge-code { background-color: rgba(var(--color-code), 0.1); color: rgba(var(--color-code), 1); } .task .info .badges .badge-design { background-color: rgba(var(--color-design), 0.1); color: rgba(var(--color-design), 1); } .task .info .badges .badge-other { background-color: rgba(var(--color-other), 0.1); color: rgba(var(--color-other), 1); } .menu { position: absolute; margin-top: 0.7rem; z-index: 2; right: 0; top: 0; cursor: pointer; } .menu:hover .menu-checkbox, .menu:hover:has(.menu-checkbox:checked) .menu-checkbox, .menu:has(.menu-checkbox:checked) .menu-checkbox { background-color: #eeeeee; } .menu .menu-checkbox { appearance: none; padding: 0.5rem; border-radius: 50%; cursor: pointer; transition: 0.15s; } .popup { background-color: #fff; border-radius: 2rem; flex-direction: column; font-size: 0.875rem; opacity: 1; pointer-events: none; position: absolute; transform: translateY(0.5rem); transition: 0.25s; width: 100%; height: 14rem; bottom: 0; left: 0; z-index: 3; transform: translateY(100%); } .popup header { display: flex; margin-bottom: 2rem; align-items: center; justify-content: space-between; } .popup header h3 { font-weight: normal; margin: 0; } .popup header i { width: 1.5rem; background: rgba(0, 0, 0, 0.05); border-radius: 50%; height: 1.5rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transform: scale(2); transition: 0.15s; } .popup header i:hover { background: rgba(0, 0, 0, 0.1); } .popup .wrapper { padding: 2rem; } .popup .badges { display: flex; gap: 0.5rem; } .popup input[type=radio] { appearance: none; position: absolute; width: 0; } .popup .badge { border: 1px solid rgba(0, 0, 0, 0.1); padding: 1rem; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; border-radius: 2rem; flex: 1 1 0px; display: flex; justify-content: center; cursor: pointer; transition: 0.15s; } .popup .badge:has(input[type=radio]:checked).badge-code { background-color: rgba(var(--color-code), 0.1); color: rgba(var(--color-code), 1); border-color: transparent; } .popup .badge:has(input[type=radio]:checked).badge-design { background-color: rgba(var(--color-design), 0.1); color: rgba(var(--color-design), 1); border-color: transparent; } .popup .badge:has(input[type=radio]:checked).badge-other { background-color: rgba(var(--color-other), 0.1); color: rgba(var(--color-other), 1); border-color: transparent; } .t3d { transform-style: var(--3d-style, flat); } #change-3d, #made-with { background-color: rgba(40, 40, 40, 0.3); bottom: 0; color: #fff; display: flex; font-family: Inter, sans-serif; font-size: 0.8rem; font-weight: 600; margin: 1rem; padding: 0.5rem 0.7rem; position: fixed; right: 0; text-transform: uppercase; text-decoration: none; cursor: pointer; } #change-3d { bottom: unset; top: 0; color: #192bad; background-color: #fff; border-radius: 6px; } </style> </head> <body> <div id="wrapper" style="--3d-style: flat"> <button id="change-3d">Switch to 3D</button> <div id="card" class="t3d"> <div id="header" class="t3d"> <div class="title t3d"> <h2>Hi John!</h2> <h1>Today's tasks</h1> <h6>02.04.2024</h6> </div> </div> <div id="main"> <div id="stats"> <div><span id="counter"></span> of 10 Completed</div> <label for="show-finished"><span>Show finished</span> <input type="checkbox" name="show-finished" id="show-finished"></label> </div> <ul id="list"> <li id="item-1"> <div class="task "> <div class="description "> <div class="action "><input type="checkbox" class="task-checkbox " name="task-1" id="task-1"> <input type="text" value="Join codechallenge"> </div> <div class="menu "><input type="checkbox" class="bi bi-three-dots menu-checkbox " name="task-1-menu" id="task-1-menu"> </div> </div> <div class="info "><span><span class="date ">10.01.2024</span> <span>03:56</span></span> <span class="badges "><span class="badge badge-design ">Design</span> <span class="badge badge-code ">Code</span> <span class="badge badge-other ">Other</span></span> </div> </div> <div class="popup "> <div class="wrapper "> <header> <h3>Choose a badge:</h3> <label for="task-1-menu"><i class="bi bi-x "></i> </label> </header> <div class="badges "><label class="badge badge-code " for="task-1-badge-code"><input type="radio" name="task-1-badge" id="task-1-badge-code" checked> <span>Code</span></label> <label class="badge badge-design " for="task-1-badge-design"><input type="radio" name="task-1-badge" id="task-1-badge-design"> <span>Design</span></label> <label class="badge badge-other " for="task-1-badge-other"><input type="radio" name="task-1-badge" id="task-1-badge-other"> <span>Other</span> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0