原生js+css实现彩色便签纸条带时间的代办事项代码
代码语言:html
所属分类:其他
代码描述:原生js+css实现彩色便签纸条带时间的代办事项代码
代码标签: 原生 js css 彩色 便签 纸条 时间 代办 事项 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; font-weight: 300; margin: 0; padding: 0; font-family: 'Quicksand', sans-serif; } html { width: 100%; min-height: 100%; } body { background-color: #CAD6E5; width: 100%; min-height: 100%; } .wrapper { margin: 0 auto; padding: 100px 0 100px 0; width: 100%; height: 100%; } .main-container { background-color:#ffffff; width: 400px; height:auto; margin:auto; min-height: 100%; margin: 0 auto; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 8px; } .clearfix::after { content: ""; display: table; clear: both; } body { color: #555; font-size: 16px; position: relative; height: 100vh; font-weight: 400; } .right { float: right; } .red { color: #FF5049 !important; } .red-focus:focus { border: 1px solid #FF5049 !important; } /********************************************** *** TOP PART **********************************************/ .top { height: 150px; background: linear-gradient(to bottom, rgba(131, 56, 236, 0.8) 0%, rgba(131, 56, 236, 0.6) 100%), url(https://s7.postimg.org/yap5ueygr/back.png); position: relative; border-radius: 0 0 100% 100%; width: 140%; margin-left: -20%; z-index: 2; margin-bottom: 20px; } /* .top::before { content: ''; background-color: #f7f7f7; height: 200px; width: 100%; border-radius: 0; position: absolute; z-index: 0; } */ .title { position: absolute; width: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .title h1 { font-size: 26px; text-align: center; font-weight: 300; margin-bottom: 10px; font-family: 'Montserrat Alternates', Arial, sans-serif; } .title h2, .title h2 span{ font-size: 18px; text-align: center; margin-bottom: 10px; font-weight: 300; text-transform: none; } /********************************************** *** BOTTOM PART **********************************************/ /***** FORM *****/ .add { padding: 14px; background-color: #f7f7f7; display: none; -webkit-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; height: 100px; margin-top: -40px; z-index: 1; } .add__container { margin: 0 auto; text-align: center; position: relative; top: 20px; } .add__description { background-color: #f7f7f7; font-family: inherit; font-size: 20px; padding: 20px 15px 12px; transition: border 0.3s; width: 100%; border:none; color: #939CA7; } .add__btn { font-size: 40px; border: none; color: #ffffff; cursor: pointer; font-family: 'Montserrat Alternates', Arial, sans-serif; line-height: 1.1; margin-left: 10px; background-color: #FF006E; border-radius:100%; height: 50px; width: 50px; bottom: -22px; position: absolute; left:0; right:0; margin: 0 auto; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1); z-index: 2; } .add__btn:active { transform: translateY(2px); } .add__description:focus { outline: none; border: none; } .add__btn:focus { outline: none; } /***** LISTS *****/ .container { width: 100%; margin:auto; padding:10px; } .item { padding: 15px; width:170px; height:170px; border-radius:8px; font-size:18px; color:#fff; float: left; margin:10px; position: relative; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); } .item__description { word-break: break-all; } .income .item__delete--btn { color: #fff; } .item__delete--btn { font-size: 22px; background: none; border: none; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1; display: none; position: absolute; bottom: 10px; right: 12px; } .item__delete--btn:focus { outline: none; } .item__delete--btn:active { transform: translateY(2px); } .item:hover .item__delete--btn { display: block; } i { color: #ffffff; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #CAD6E5; } ::-moz-placeholder { /* Firefox 19+ */ color: #CAD6E5; } :-ms-input-placeholder { /* IE 10+ */ color: #CAD6E5; } :-moz-placeholder { /* Firefox 18- */ color: #CAD6E5; } </style> </head> <body > <div class="wrapper"> <div class="main-container"> <div class="top"> <div class="title"> <h1 id="date">%date%</h1> <h2>You've got <span class="total__items">%items%</span> to do today!</h2> </div> <button class="add__btn">+</button> </div> <div class="bottom"> <div class="add"> <div class="add__container"> <input type="text" class="add__description" placeholder="What would you like to do today?"> </div> </div> <div class="container clearfix"> <div class="todos"> <div class="todos"> <div class="todos__list"> <div class="item" style="background:linear-gradient(to bottom, rgba(255,190,11, 1) 0%, rgba(255,190,11, 0.8) 100%)"> <div class="item__description">Walk the dog</div> <div class="item__delete"> <button class="item__delete--btn"> <i class="ion-ios-trash-outline"></i> </button> </div> </div> <div class="item" style="background:linear-gradient(to bottom, rgba(255,0,110, 1) 0%, rgba(255,0,110, 0.8) 100%)"> <div class="item__description">Buy groceries</div> <div c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0