原生js实现todolist待办事项卡片效果
代码语言:html
所属分类:布局界面
代码描述:原生js实现todolist待办事项卡片效果,采用css布局,原生js写法,无需其他的框架
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito:600,700&display=swap"); *, *::before, *::after { box-sizing: border-box; margin: 0; } body { min-height: 450px; height: 100vh; margin: 0; background: radial-gradient(ellipse farthest-corner atcenter top, #f39264 0%, #f2606f 100%); color: #fff; font-family: 'Nunito', sans-serif; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } /*-------------------- ToDo List -------------------*/ .todoList { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 500px; background: #fff; border-radius: 10px; box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3); } /** Header Image **/ .cover-img .cover-inner { background: url("http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90"); height: 190px; background-size: cover; background-position: 10% 20%; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative; } .cover-img .cover-inner::after { background: rgba(0, 0, 0, 0.3); content: ""; top: 0; left: 0; position: absolute; width: 100%; height: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; } .cover-img .cover-inner h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Nunito', sans-serif; text-transform: uppercase; font-size: 2.8rem; z-index: 10; font-weight: 700; } /* Main Content */ .content { padding: 10px 20px; } .content form { display: flex; justify-content: space-between; margin-bottom: 15px; padding: 0 10px 0 5px; border-bottom: 1px solid #8e979c; } .content form > * { background: transparent; border: none; height: 35px; } .content input[type=text] { font-weight: 700; font-size: 1.2rem; color: #6C717B; } .content .input-buttons a { text-decoration: none; } .content .input-buttons i { margin-top: 5px; font-size: 20px; color: #8e979c; } .content ul.todos { margin-left: 0; padding: 0; list-style: none; height: 220px; overflow: auto; } .content li { user-select: none; margin-bottom: 10px; display: flex; justify-content: space-between; } .content li i { color: #6C717B; font-size: 15px; cursor: pointer; padding: 5px 10px; } .content input[type=checkbox] { display: none; } .content input[type=checkbox] + label { color: #6C717B; font-size: 15px; cursor: pointer; position: relative; border-radius: 3px; display: inline-block; padding: 5px 5px 5px 30px; } .content input[type=checkbox] + label:hover { color: #353A42; background-color: #F4F7FA; } .content input[type=checkbox] + label span.check { left: 4px; top: 50%; position: absolute; transform: translateY(-50%); width: 18px; height: 18px; display: block; background: white; border-radius: 3px; border: 1px solid #b8bfcc; box-shadow: 0 2px 3px #F0F4F8; } .content input[type=checkbox]:checked + label { color: #AEB7C6; text-decoration: line-through; } .content input[type=checkbox]:checked + label span.check { background-color: transparent; border-color: transparent; box-shadow: none; } .content input[type=checkbox] + label span.check::after { width: 100%; height: 100%; content: ''; display: block; position: absolute; background-image: url("https://tjgillweb.github.io/Vacation-Todo-App/image.........完整代码请登录后点击上方下载按钮下载查看
网友评论0