日历备注效果
代码语言:html
所属分类:选择器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Calendar Widget</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Dosis:400,700'> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <style> html { position: relative; position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; } body { background-color: #e6dc83; } section.calendar { background-color: #29323f; font-family: 'Dosis', sans-serif; color: #fff; width: 290px; padding: 45px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.6); border-radius: 5px; } section.calendar h1 { text-align: center; color: #fcee6d; margin: 0 0 30px 0; } section.calendar form { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } section.calendar form label.weekday { display: inline-block; width: 25px; margin: 8px; text-align: center; color: #999; } section.calendar form form { margin: 0; padding: 0; } section.calendar form label.day { display: inline-block; width: 25px; margin: 8px; } section.calendar form label.day span { display: inline-block; width: 25px; height: 25px; line-height: 25px; margin: -2px 0 0 -2px; border-radius: 50%; border: 2px solid #29323f; text-align: center; transition: all .2s linear; cursor: pointer; } section.calendar form label.day span:hover { border-color: #e7d84f; } section.calendar form label.day em { display: inline-block; position: absolute; border-radius: 50%; border-color: #29323f; width: 3px; height: 3px; background-color: #685e02; margin-left: 11px; margin-top: 2px; opacity: 0; transition: all .2s linear; } section.calendar form label.day input[type=text] { border: 0; opacity: 0; position: absolute; margin-top: 40px; left: -45px; width: 380px; height: 1px; padding: 0; outline: none; font-size: 16px; transition: height .2s linear, opacity .2s linear, color .02s linear; color: #fff; } section.calendar form label.day input[type=text]:focus { opacity: 1; height: 35px; padding: 10px 40px; left: -45px; width: 300px; color: #29323f; } section.calendar form label.day input[type=text]:focus + span { color: #fcee6d; border-color: #fcee6d; background: #fcee6d; color: #29323f; font-weight: bold; margin-bottom: 65px; } section.calendar form label.day input[type=text]:focus ~ em { border-radius: 0; border: 5px solid transparent; background: transparent; border-bottom-color: white; margin-top: -62px; margin-left: 7px; width: 0; height: 0; display: inline-block; opacity: 1; } section.calendar form label.day input[type=text]:valid ~ em { display: inline-block; opacity: 1; } section.calendar form label.day.invalid { opacity: 0; width: 25px; height: 25px; } section.calendar form label.day.invalid span, section.calendar form label.day.invalid input { display: none; } section.calendar div.clearfix { clear: both; } section.calendar div.hidden { display: none; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <section class='calendar'> <h1>August 2015</h1> <form action='#'> <label class='weekday'>Mo</label> <label class='weekday'>Tu</label> <label class='weekday'>We</label> <label class='weekday'>Th</label> <label class='weekday'>Fr</label> <label class='weekday'>Sa</label> <label class='weekday'>Su</label> <label class='day invalid' data-day='0'> <input class='appointment' date-day='-4' placeholder='What would you like to do?' required='true' type='text'> <span>-4</span> <em></em> </label> <label class='day invalid' data-day='1'> <input class='appointment' date-day='-3' placeholder='What would you like to do?' required='true' type='text'> <span>-3</span> <em></em> </label> <label class='day invalid' data-day='2'> <input class='appointment' date-day='-2' placeholder='What would you like to do?' required='true' type='text'> <span>-2</span> <em></em> </label> <label class='day invalid' data-day='3'> <input class='appointment' date-day='-1' placeholder='What would you like to do?' required='true' type='text'> <span>-1</span> <em></em> </label> <label class='day invalid' data-day='4'> <input class='appointment' date-day='0' placeholder='What would you like to do?' required='true' type='text'> <span>0</span> <em></em> </label> <label class='day' data-day='5'> <input class='appointment' date-day='1' placeholder='What would you like to do?' required='true' type='text'> <span>1</span> <em></em> </label> <label class='day' data-day='6'> <input class='appointment' date-day='2' placeholder='What would you like to do?' required='true' type='text'> <span>2</span> <em></em> </label> <label class='day' data-day='7'> <input class='appointment' date-day='3' placeholder='What would you like to do?' required='true' type='text'> <span>3</span> <em></em> </label> <label class='day' data-day='8'> <input class='appointment' date-day='4' placeholder='What would you like to do?' required='true' type='text'> <span>4</span> <em></em> </label> <label class='day' data-day='9'> <input class='appointment' date-day='5' placeholder='What would you like to do?' required='true' type='text'> <span>5</span> <em></em> </label> <label class='day' data-day='10'> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0