vue实现待办列表交互效果
代码语言:html
所属分类:其他
代码描述:vue实现待办列表交互效果
下面为部分代码预览,完整代码请点击下载或在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/font-awesome-4.7.0/css/font-awesome.min.css"> <style> *, *:before, *:after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga", "kern"; overflow-y: scroll; overflow-x: hidden; height: 100%; background: linear-gradient(210deg, #9adbbe, #4fc08d); } body { overflow: hidden; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-family: "Source Sans Pro", sans-serif; } button { background: none; border: none; color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; } button:focus { outline: none; } button:hover { cursor: pointer; } .app { min-height: 50vh; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 0 5px rgba(25, 25, 25, 0.25); } .btn { font-size: 14px; margin: 0 .5em; border-radius: 2em; padding: 0.75em 1.5em; cursor: pointer; background: none; color: #2d7c58; border: 1px solid; letter-spacing: 1px; font-family: "Source Sans Pro", sans-serif; color: #4fc08d; border: #4fc08d 1px solid; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .btn:hover, .btn:focus { color: #fff; background: #4fc08d; } .form { width: 100%; padding: 1.5rem 1rem 0 1rem; display: -webkit-box; display: flex; } .form__input { width: 100%; font-size: 14px; margin: 0 .5em; border-radius: 2em; padding: 0.75em 1.5em; background: none; font-family: "Source Sans Pro", sans-serif; border: #e3e3e3 1px solid; -webkit-transition: border 250ms ease-out; transition: border 250ms ease-out; } .form__input:focus { border: #4fc08d 1px solid; outline: none; } .todo-list { width: 100%; padding: 0 1rem; -webkit-box-flex: 1; flex: 1; } .todo-list__item { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: .5em; margin-bottom: .5em; border-radius: 3px; -webkit-transition: 200ms; transition: 200ms; color: #4fc08d; } .todo-list__item:last-child { margin-bottom: 0; } .todo-list__item.complete { color: lightgreen; } .todo-list__item.complete .todo-list__item-content:after { background: lightgreen; } .todo-list__item-content { position: relative; } .todo-list__item-content:after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 1px; background: #4fc08d; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scalex(0); transform: scalex(0); } .todo-list__item-content:hover:after, .todo-list__item-content:focus:after { -webkit-transform: scalex(1); transform: scalex(1); } .todo-list__item-remove { margin-left: .5em; background: none; border: 1px solid; color: inherit; padding: 0; line-height: 1; width: 2em; height: 2em; display: -webkit-box; display: flex; -webkit-box-a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0