css+div实现待办事项ui布局设计代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现待办事项ui布局设计代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @charset "UTF-8"; :root { --primary-color: rgba(0,139,125,1); } *, *:before, *:after { box-sizing: border-box; outline: none; } html { font-family: "Source Sans Pro", sans-serif; font-size: 16px; font-smooth: auto; font-weight: 300; line-height: 1.5; color: #444; } button { cursor: pointer; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: var(--primary-color); transition: background 0.5s ease; } .title { margin: 3.125rem 0 1.25rem; color: rgba(245, 245, 245, 0.5); font-size: 1.25rem; font-weight: bold; text-transform: uppercase; } .theme { position: fixed; bottom: 2.5rem; left: 2.5rem; margin: 0; padding: 0.625rem 1.25rem; border: 0; font-weight: bold; text-transform: uppercase; box-shadow: 0.1875rem 0.1875rem 0 rgba(245, 245, 245, 0.4); transition: 0.25s; cursor: pointer; } .theme:hover { box-shadow: 0rem 0rem 0 rgba(245, 245, 245, 0.4); } .menu { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 31.25rem; height: 3.125rem; background-color: white; border-radius: 0.625rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); overflow: hidden; z-index: 11; } .menu .menu-button { position: absolute; display: flex; align-items: center; justify-content: center; width: 4.6875rem; height: 3.125rem; background-color: white; border: 0; border-radius: 0.625rem 0 0 0.625rem; box-shadow: 0.25rem 0 1.25rem rgba(34, 34, 34, 0.2); z-index: 99; } .menu .menu-button:after { position: absolute; content: ""; left: 100%; width: 0; height: 0; border-left: 0.625rem solid white; border-top: 1.55rem solid transparent; border-bottom: 1.55rem solid transparent; border-radius: 0 0.625rem 0 0; } .menu .menu-button > span { position: relative; display: block; width: 1.5rem; height: 0.125rem; background: var(--primary-color); } .menu .menu-button > span:before, .menu .menu-button > span:after { position: absolute; content: ""; left: 0; width: 1.5rem; height: 0.125rem; background: var(--primary-color); transition: 0.25s; } .menu .menu-button > span:before { top: -0.375rem; } .menu .menu-button > span:after { top: 0.375rem; } .menu .text { position: absolute; left: 20%; color: var(--primary-color); font-size: 0.75rem; font-weight: bold; line-height: 0; text-transform: uppercase; opacity: 1; transition: 0.15s; } .menu .date { position: absolute; right: 1.25rem; color: #888888; font-size: 0.75rem; font-weight: bold; text-align: right; text-transform: uppercase; } .menu .date .time { color: var(--primary-color); font-size: 0.875rem; } .menu .date .time .colon { position: relative; display: inline-block; width: 1px; margin-left: -0.25rem; } .menu .nav { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 0%; height: 100%; margin: 0; padding: 0; transition: 0.25s; } .menu .nav > li { position: absolute; left: -25px; display: flex; align-items: center; justify-content: center; width: 25%; height: 100%; background: white; opacity: 0; transition: 0.5s; } .menu .nav > li:nth-of-type(1) { z-index: calc(10 - 1); } .menu .nav > li:nth-of-type(2) { z-index: calc(10 - 2); } .menu .nav > li:nth-of-type(3) { z-index: calc(10 - 3); } .menu .nav > li:nth-of-type(4) { z-index: calc(10 - 4); } .menu.open .menu-button > span { height: 0.125rem; background-color: transparent; transform-origin: center center; } .menu.open .menu-button > span:before, .menu.open .menu-button > span:after { position: absolute; content: ""; left: 0; width: 1.5rem; height: 0.125rem; background: var(--primary-color); transition: 0.25s; } .menu.open .menu-button > span:before { top: 0; transform: rotate(45deg); } .menu.open .menu-button > span:after { top: 0; transform: rotate(-45deg); } .menu.open .text { left: 0; opacity: 0; transition: 0.15s; } .menu.open .nav { width: 100%; padding-left: 4.5rem; transition: 0.25s; } .menu.open .nav > li { position: relative; left: 0; box-shadow: 0.25rem 0 1.25rem rgba(34, 34, 34, 0.2); opacity: 1; transition: 0.25s; } .menu.open .nav > li:after { position: absolute; content: ""; left: 100%; width: 0; height: 0; border-left: 0.625rem solid white; border-top: 1.55rem solid transparent; border-bottom: 1.55rem solid transparent; border-radius: 0 0.625rem 0 0; transition: 0.25s; } .menu.open .nav > li:hover { background: var(--primary-color); } .menu.open .nav > li:hover:after { border-left: 0.625rem solid var(--primary-color); } .menu.open .nav > li:hover button { color: white; } .menu.open .nav > li > button { position: relative; display: block; margin: 0; background-color: transparent; border: none; color: var(--primary-color); font-size: 0.75rem; font-weight: bold; text-decoration: none; text-transform: uppercase; } .tasks { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 0; overflow: hidden; } .open .tasks { height: 100%; } .tasks .task { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 1.25rem; padding: 0 0.625rem 0.75rem; border-bottom: 0.0625rem solid rgba(34, 34, 34, 0.1); } .tasks .task:before { position: absolute; content: ""; top: 30%; left: 0; width: 0%; height: 0.125rem; background-color: #388E3C; transition: width 0.5s ease; z-index: 9; } .tasks .task.task-complete { color: #388E3C; } .tasks .task.task-complete:before { width: 100%; } .tasks .task .task-check, .tasks .task .task-name, .tasks .task .task-move { position: relative; display: flex; align-items: center; justify-content: center; } .tasks .task .task-name { justify-content: flex-start; width: 85%; padding: 0.3125rem; } .tasks-home, .tasks-work, .tasks-shared, .tasks-complete { position: relative; width: 29.6875rem; height: 0; margin-top: -2rem; padding: 3.125rem 1.875rem 1.875rem; background-color: whitesmoke; border-radius: 0 0 0.625rem 0.625rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); overflow: hidden; transition: all 0.25s ease; z-index: 10; } .tasks-home.open, .tasks-work.open, .tasks-shared.open, .tasks-complete.open { height: auto; padding: 3.125rem 1.875rem 1.875rem; transition: all 0.25s ease; } .tasks-home.open > button i, .tasks-work.open > button i, .tasks-shared.open > button i, .tasks-complete.open > button i { transform: rotate(180deg); } .tasks-home > button, .tasks-work > button, .tasks-shared > button, .tasks-complete > button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 1.25rem; padding: 0; border: 0; background-color: whitesmoke; color: var(--primary-color); font-size: 1rem; font-weight: bold; line-height: 1; } .tasks-home > button > i, .tasks-work > button > i, .tasks-shared > button > i, .tasks-complete > button > i { margin-right: 0.3125rem; } .tasks-home { z-index: 9; } .tasks-work { z-index: 8; } .tasks-shared { z-index: 7; } .tasks-complete { z-index: 6; } .weather { position: absolute; bottom: 100px; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.125rem; background-color: rgba(245, 245, 245, 0.2); border-radius: 0.3125rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); color: whitesmoke; font-size: 4.5rem; transform: translate(-50%, -50%); z-index: 0; } .weather:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .weather:before { position: absolute; content: "º"; top: 2.8rem; right: 2.8rem; opacity: 0.8; font-size: 1.875rem; } .weather:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; top: 0; left: 0; animation: clouds1 60s linear infinite; } @keyframes clouds1 { to { background-position: 200%; } } .weather > span { margin-top: 0.3125rem; font-size: 1rem; text-transform: uppercase; } </style> </head> <body > <h1 class="title">A List of Things To Do</h1> <div class="menu"> <button class="menu-button"> <span></span> </button> <div class="text">Menu</div> <div class="date"> <span class="month"></span> <span class="day"></span>, <span class="year"></span> <div class="time"> <span class="hours"></span> <span class="colon">:</span> <span class="minutes"></span> <span class="colon">:</span> <span class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0