css实现日程计划待办事项UI界面效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现日程计划待办事项UI界面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.min.css"> <style> @charset "UTF-8"; html { box-sizing:border-box } *,*:before,*:after { box-sizing:inherit } * { outline:0 } body { background:linear-gradient(45deg,#13495f,#764be2,#8373c6,#77d3b9); background-attachment:fixed; height:100vh; padding:3rem 0; margin:0; color:#555; font-family:"Lato",sans-serif; font-size:14px } .container { width:90%; margin:auto } .mobile-wrapper { background:#fff; z-index:1; position:relative; width:380px; min-height:100%; margin:auto; padding:10px 0 20px; border-radius:10px; box-shadow:0 10px 30px -10px #000; overflow:hidden } .header { padding-bottom:15px; margin-bottom:40px } .header .container { position:relative } .header .container span { color:#444; font-family:"Ramabhadra"; font-size:21px; font-weight:700 } .header .container h1 { margin-top:5px; color:#919294; font-size:13px; font-weight:300 } .header .container .menu-toggle { width:25px; height:25px; background:#fff; padding:24px; border-radius:50%; direction:rtl; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -14px #000; position:absolute; top:0; right:0; cursor:pointer } .header .container .menu-toggle span { display:block; width:25px; height:2px; background:#777; border-radius:2px; transition:all 300ms ease } .header .container .menu-toggle span:not(:last-child) { margin-bottom:5px } .header .container .menu-toggle span:first-child { width:20px } .header .container .menu-toggle span:last-child { width:15px } .header .container .menu-toggle:hover span:first-child,.header .container .menu-toggle:hover span:last-child { width:100% } .header .container::before { content:""; display:block; width:0; height:0; border:6px solid transparent; border-left-color:#e8e8e8; position:absolute; bottom:-13px; right:0 } .header .container::after { content:""; display:block; width:calc(100% - 10px); height:2px; background-color:#e8e8e8; position:relative; top:8px } .today-box { background:linear-gradient(to left,#485fed,rgba(255,44,118,0.25)),#485fed; color:#FFF; padding:37px 40px; position:relative; box-shadow:0 0 40px -9px #485fed; margin-bottom:50px } .today-box::before { content:""; background:linear-gradient(to left,#485fed,rgba(255,44,118,0.25)),#485fed; opacity:.4; z-index:-1; display:block; width:100%; height:40px; margin:auto; position:absolute; bottom:-13px; left:50%; transform:translatex(-50%); border-radius:50%; box-shadow:0 0 40px 0 #485fed } .today-box .breadcrumb { font-weight:300; position:relative } .today-box .breadcrumb::after { content:""; font-family:"Ionicons"; vertical-align:middle; font-size:12px; font-weight:100; display:inline-block; color:#fff; text-align:center; position:absolute; left:45px; top:3px } .today-box .date-title { font-size:20px; margin:7px 0 0 0; letter-spacing:1px; font-weight:600; text-shadow:0 0 5px rgba(0,0,0,0.15) } .today-box .plus-icon { border:2px solid rgba(255,255,255,0.6); border-radius:50%; box-shadow:0 10px 30px -14px #000; position:absolute; top:50%; transform:translateY(-50%); right:40px; cursor:pointer; transition:all 350ms ease; transition-timing-function:cubic-bezier(0.05,1.8,1,1.57) } .today-box .plus-icon:hover { transform:translateY(-40%) } .today-box .plus-icon i { font-size:22px; font-weight:700; background:#fff; color:#777; width:45px; height:45px; border:6px solid #485fed; border-radius:50%; display:flex; align-items:center; justify-content:center } .today-box .plus-icon:active { top:52%; transform:translatey(-52%); right:38px; box-shadow:0 8px 30px -14px #000 } .upcoming-events .container h3 { color:#333; font-size:17px; margin-bottom:30px; position:relative } .upcoming-events .container h3::before { content:""; display:block; width:58%; height:2px; background-color:#e8e8e8; position:absolute; top:60%; transform:translatey(-60%); right:0 } .upcoming-events .container h3::after { content:""; font-family:"Ionicons"; color:rgba(0,0,0,0.1); vertical-align:middle; font-size:36px; font-weight:100; display:inline-block; background:#fff; color:#919294; width:38px; text-align:center; position:absolute; right:60px; top:-10px } .upcoming-events .container .events-wrapper { margin-bottom:30px } .upcoming-events .container .events-wrapper .event { position:relative; margin-bottom:25px; padding-left:30px; cursor:pointer } .upcoming-events .container .events-wrapper .event i { font-size:24px; font-weight:100; position:absolute; left:0; top:-4px } .upcoming-events .container .events-wrapper .event .event__point { margin:0; color:#555; font-size:15px; font-weight:800; letter-spacing:1px } .upcoming-events .container .events-wrapper .event .event__duration { position:absolute; top:5px; right:0; color:#999; font-size:10px; font-weight:800; font-style:italic } .upcoming-events .container .events-wrapper .event .event__description { margin-top:10px; color:#919294; font-size:13px; font-weight:300 } .upcoming-events .container .events-wrapper .event.active { background:#e8e8e8; padding:17px 0 5px 60px; margin-bottom:38px; border-radius:5px } .upcoming-events .container .events-wrapper .event.active::after { conte.........完整代码请登录后点击上方下载按钮下载查看
网友评论0