html5 日历 仿ios,一款完整的蓝白风格HTML5日历应用程序
CSS
语言：
CSSSCSS
确定
@import 'https://fonts.googleapis.com/css?family=Lato:300,300i,900,900i';
.txt__normal {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
.txt__normal--it {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-style: italic;
}
.txt__bold {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.txt__bold--it {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-style: italic;
}
.txt__awesome {
font: normal normal normal 14px/1 FontAwesome;
}
/* VARIABLES ================================================*/
/* RESPONSIVE ================================================*/
/* ===========================================================*/
body {
position: realative;
height: 100%;
}
body.overlay:before {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
}
html {
height: 100%;
background: #003567;
color: #ffffff;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
.wrapper {
position: relative;
max-width: 1280px;
width: 100%;
height: 100%;
margin: 0 auto;
}
a {
color: inherit;
text-decoration: none;
}
/* UTILITY ===========================================================*/
.u-border-box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.u-transition {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.u-transition.long {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.u-transition.elastic {
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.resetDefaultApparence {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 0px;
padding: 0;
border-width: 0;
resize: none;
}
.resetDefaultApparence::-ms-expand {
display: none;
}
/* STYLE ===========================================================*/
header {
position: fixed;
height: 80px;
width: 100%;
z-index: 50;
background: #003567;
}
header > .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: #ffffff;
letter-spacing: 2px;
font-size: 13px;
}
header > .wrapper a {
color: #ffffff;
text-decoration: none;
margin-left: 10px;
}
.c-monthyear {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.c-month {
position: relative;
height: 80px;
line-height: 80px;
}
.c-month #c-paginator {
position: relative;
width: 200px;
display: block;
height: 80px;
line-height: 80px;
text-align: center;
overflow: hidden;
}
.c-month #c-paginator .c-paginator__month {
position: absolute;
width: 200px;
top: 0;
bottom: 0;
right: 0;
}
.c-month #c-paginator .c-paginator__month:nth-child(1) {
left: 0;
}
.c-month #c-paginator .c-paginator__month:nth-child(2) {
left: 200px;
}
.c-month #c-paginator .c-paginator__month:nth-child(3) {
left: 400px;
}
.c-month #c-paginator .c-paginator__month:nth-child(4) {
left: 600px;
}
.c-month #c-paginator .c-paginator__month:nth-child(5) {
left: 800px;
}
.c-month #c-paginator .c-paginator__month:nth-child(6) {
left: 1000px;
}
.c-month #c-paginator .c-paginator__month:nth-child(7) {
left: 1200px;
}
.c-month #c-paginator .c-paginator__month:nth-child(8) {
left: 1400px;
}
.c-month #c-paginator .c-paginator__month:nth-child(9) {
left: 1600px;
}
.c-month #c-paginator .c-paginator__month:nth-child(10) {
left: 1800px;
}
.c-month #c-paginator .c-paginator__month:nth-child(11) {
left: 2000px;
}
.c-month #c-paginator .c-paginator__month:nth-child(12) {
left: 2200px;
}
.c-month .prev,
.c-month .next {
position: absolute;
display: block;
top: 50%;
width: 30px;
height: 30px;
padding: 9px 12px;
background-color: #004b8f;
cursor: pointer;
z-index: 10;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transform: translatey(-50%);
-webkit-transform: translatey(-50%);
border-radius: 50%;
-webkit-border-radius: 50%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-month .prev.long,
.c-month .next.long {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-month .prev.elastic,
.c-month .next.elastic {
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-month .prev {
left: 0;
}
.c-month .prev:hover {
padding: 9px 10px;
background-color: #0055a4;
}
.c-month .next {
right: 0;
}
.c-month .next:hover {
padding: 9px 14px;
background-color: #0055a4;
}
.c-paginator__year {
height: 80px;
line-height: 80px;
padding: 0 20px;
}
.o-btn {
display: inline-block;
padding: 0 10px;
line-height: 30px;
height: 30px;
background-color: #004b8f;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 15px;
-webkit-border-radius: 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-btn.long {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-btn.elastic {
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.o-btn span {
margin-left: 10px;
}
.o-btn:hover {
background-color: #0055a4;
}
.c-calendar {
padding-top: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.c-calendar__style {
background-color: #00407b;
margin: 20px;
padding: 10px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18);
-webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18);
border-radius: 6px;
-webkit-border-radius: 6px;
}
.c-cal__container {
position: relative;
width: calc(100% - 300px);
height: 0;
padding-bottom: 65%;
overflow: hidden;
}
.c-main {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.c-main-01 {
left: 0;
}
.c-main-02 {
left: 100%;
}
.c-main-03 {
left: 200%;
}
.c-main-04 {
left: 300%;
}
.c-main-05 {
left: 400%;
}
.c-main-06 {
left: 500%;
}
.c-main-07 {
left: 600%;
}
.c-main-08 {
left: 700%;
}
.c-main-09 {
left: 800%;
}
.c-main-10 {
left: 900%;
}
.c-main-11 {
left: 1000%;
}
.c-main-12 {
left: 1100%;
}
.c-cal__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c-cal__col {
width: calc(100% / 7);
text-align: center;
height: 50px;
line-height: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.c-cal__cel {
position: relative;
width: calc(100% / 7);
text-align: center;
cursor: pointer;
border-radius: 50%;
-webkit-border-radius: 50%;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-cal__cel p {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
line-height: 40px;
background: #004585;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
border-radius: 50%;
-webkit-border-radius: 50%;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-cal__cel::before {
content: "";
display: block;
padding-top: 100%;
}
.c-cal__cel:nth-child(n+6) p {
background: #003b71;
}
.c-cal__cel:hover {
background-color: #004b8f !important;
}
.c-cal__cel:hover p {
background: #003b71 !important;
}
.c-cal__cel.isSelected {
background-color: #004b8f;
}
.c-cal__cel.isSelected p {
background: #003b71;
}
.c-cal__cel.isToday {
background-color: rgba(245, 113, 112, 0.2);
}
.c-cal__cel.isToday p {
background: rgba(245, 113, 112, 0.4);
}
.c-cal__cel.other_month {
color: rgba(255, 255, 255, 0.2);
}
.event:before {
position: absolute;
content: '';
display: block;
width: 10px;
height: 10px;
background-color: #F5F5F5;
z-index: 10;
padding: 0;
top: 50%;
left: 50%;
border-radius: 50%;
-webkit-border-radius: 50%;
transform: translate(-50%, calc(50% + 10px));
-webkit-transform: translate(-50%, calc(50% + 10px));
}
.event--birthday:before {
background-color: #FACC2E;
}
.event--festivity:before {
background-color: #10DDC2;
}
.event--important:before {
background-color: #F57170;
}
.c-aside {
width: 300px;
padding: 20px;
}
.c-aside__day {
font-size: 28px;
margin: 50px 0;
}
.c-aside__day .c-aside__num {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.c-aside__event {
position: relative;
padding-left: 20px;
margin: 20px 0;
}
.c-aside__event:before {
position: absolute;
display: block;
content: '';
width: 16px;
height: 16px;
left: 0;
background-color: #F5F5F5;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.c-aside__event--birthday:before {
background-color: #FACC2E;
}
.c-aside__event--festivity:before {
background-color: #10DDC2;
}
.c-aside__event--important:before {
background-color: #F57170;
}
.c-event__creator {
position: absolute;
top: 50%;
left: 50%;
max-width: 500px;
max-height: 470px;
width: 100%;
height: 100%;
z-index: 100;
padding: 20px;
visibility: hidden;
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transform: translate(-50%, -50%) scale(0.9);
-webkit-transform: translate(-50%, -50%) scale(0.9);
}
.c-event__creator.long {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-event__creator.elastic {
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-event__creator form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c-event__creator.isVisible {
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
opacity: 1;
visibility: visible;
}
input,
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 0px;
padding: 0;
border-width: 0;
resize: none;
margin: 10px 0;
padding: 10px;
width: 100%;
border-radius: 20px;
-webkit-border-radius: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input::-ms-expand,
textarea::-ms-expand,
select::-ms-expand {
display: none;
}
input {
height: 40px;
}
html5 日历 仿ios,一款完整的蓝白风格HTML5日历应用程序相关推荐
- android 日历仿IOS,基于Android week view仿小米和iphone日历效果
前言 最近由于项目需求,要做一个仿小米日历的功能,下面显示一天的日程,header以周为单位进行滑动,github上找了很久也没有找到合适的,但找到一相近的开源项目Android-week-view, ...
- html ios风格日历,仿IOS移动端日历
插件描述:超好用美观的移动端日历,兼容安卓和苹果及微信浏览器 (function($) { $.init(); var result = $('#demo2')[0]; var btns = $('. ...
- html5效果源码,10款web前端值得学习的 HTML5 效果附源码
1.jQuery右侧Tab选项卡的焦点图插件 这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡 ...
- 『HTML5制造仿JQuery作用』减速
2019独角兽企业重金招聘Python工程师标准>>> 开言 本篇文章经过开源html5引擎lufylegend完成JQuery滑动效果.能使一个矩形来回减速加快滑行.因为用到了ht ...
- 好用的日历 android,手机日历软件哪个最好用?日历app排行榜(10款)
日历是一种主要用于记录日期以及与其相关的信息的出版物.日历在中国的历史已经非常的久远,是一种日常生活不可缺少的实物.如今在实物日历的基础之上又有了非常多的虚拟手机日历APP应用.其中,最典型的要算中华 ...
- 仿ios桌面vivo_vivo精仿ios11主题包专属版下载-vivo精仿ios11主题包自定义版v2.9.9安卓版-007游戏网...
vivo精仿ios11主题包自定义版,这是一款非常热门的安卓仿ios的主题应用软件,这款软件提供最新最全的ios11所有的主题应用和壁纸,还有各种图标免费使用,让你体验安卓和苹果并存的感觉,喜欢的话就 ...
- html5卷轴展开动画,8款基于Jquery的WEB前端动画特效
超级绚丽,20款前端动画特效,轰炸你的眼睛,一定要看到最后! 1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的 ...
- html ios风格日历,极致演绎iOS7风格 简约日历应用Cal体验
昨日小编推荐了扁平风的天气应用,而今天推荐的是来自 Any.DO开发商的一款日历应用<Cal | Calendar for Living.>,不仅秉承了之前一贯的简洁实用风格,连UI也设计 ...
- Android 仿iOS弹窗
仿iOS弹窗 一.先上效果图 二.GitHub地址 GitHub地址 https://github.com/MNXP/MyDialog 三.使用 1)基本使用 myDialog = new Alert ...
- android开发仿原生联系人,android 仿IOS联系人列表
[实例简介] 这是一款仿ios联系人列表控件,支持字母行置顶(有阴影和没阴影置顶).支持右边字母视图点击和滑动到置顶的字母行.搜索栏支持中英文搜索 [实例截图] [核心代码] PhoneDemo └─ ...
最新文章
- Android NDK的文件夹
- mysql 基本操作
- Jquery复习（七）之尺寸
- Android系统（117）---Activity启动过程
- 为什么大厂们 一边裁员，一边招人。。
- linux下面java配置,linux下面配置java环境变量
- ExtJs视频教程下载地址
- C# OCR 文字识别
- android经典动态壁纸,Android动态壁纸解析
- 社会工程学（科普篇）
- 国外著名java论坛
- Phoenix 升級报Cluster is being concurrently upgraded from 4.9.x to 4.13.x 错误
- 关于eclipse工作空间打不开问题
- 高数_第6章无穷级数
- C# 使用Salt+Hash来为密码加密
- 分布式ssh_使用SSH的分布式管理
- ECMAScript6常用语法
- 汽车电子之功能安全产品设计过程
- 【E2E】E2E通信保护协议学习1
- Android基础篇(四)