用html完成编辑日程,HTML5 旅程/日程表提醒移动应用

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body,

html {

width: 100%;

height: 100%;

position: relative;

background: #3288ff;

}

.b-tour {

width: 320px;

height: 538px;

position: fixed;

margin: auto;

left: 0;

right: 0;

top: 0;

bottom: 0;

background: #fff;

text-align: center;

padding-top: 80px;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);

}

.btn {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: pointer;

position: fixed;

background: #fff;

border-radius: 20px;

padding: 0 25px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

top: 10px;

right: 10px;

font: 16px/40px Arial, sans-serif;

color: #3288ff;

z-index: 2;

}

.btn:active {

background: #eaf3ff;

}

.b-comment {

width: 166px;

height: 74px;

position: relative;

margin: 8px auto;

padding: 10px;

}

.b-comment--svg {

width: 168px;

height: 78px;

position: absolute;

top: -1px;

left: -1px;

}

.b-comment--svg > rect {

stroke-dasharray: 473;

stroke-dashoffset: 473;

-webkit-transform: rotate(90deg) scale(-1, 1);

-ms-transform: rotate(90deg) scale(-1, 1);

transform: rotate(90deg) scale(-1, 1);

-webkit-transform-origin: 38px 84px;

-ms-transform-origin: 38px 84px;

transform-origin: 38px 84px;

fill: none;

stroke: #e3e3e7;

}

.b-comment--bell {

width: 40px;

height: 40px;

border-radius: 50%;

margin: auto;

background: #3288ff;

position: absolute;

z-index: 5;

top: 0;

bottom: 0;

right: -20px;

padding: 10px;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;

}

.b-comment .svg-bell {

width: 20px;

height: 20px;

fill: #fff;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transform-origin: center top;

-ms-transform-origin: center top;

transform-origin: center top;

}

.b-comment .rotate {

-webkit-transform-origin: center top;

-ms-transform-origin: center top;

transform-origin: center top;

}

.b-comment--user {

width: 18px;

height: 18px;

background: #dbdfdf;

border-radius: 50%;

position: relative;

padding-top: 4px;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;

}

.b-comment--user > div {

background: #fff;

border-radius: 50%;

margin: auto;

}

.b-comment--user > div:first-child {

width: 8px;

height: 8px;

}

.b-comment--user > div:last-child {

width: 12px;

height: 12px;

margin-top: 2px;

}

.b-comment--line {

width: 0;

height: 5px;

background: #dbdfdf;

position: relative;

z-index: 2;

border-radius: 1px;

}

.b-comment--line-1 {

position: absolute;

top: 12px;

left: 33px;

}

.b-comment--line-2 {

background: #f3f3f3;

position: absolute;

top: 21px;

left: 33px;

}

.b-comment--line-3 {

background: #f3f3f3;

position: absolute;

top: 12px;

right: 10px;

}

.b-comment--line-4 {

margin-top: 13px;

}

.b-comment--line-5 {

margin-top: 7px;

}

.block-top,

.block-bottom {

width: 166px;

height: 58px;

margin: auto;

border: 1px solid #e3e3e7;

position: relative;

opacity: 0;

}

.block-top {

border-width: 0 1px 1px;

border-radius: 0 0 4px 4px;

bottom: 16px;

}

.block-bottom {

border-width: 1px 1px 0;

border-radius: 4px 4px 0 0;

bottom: -16px;

}

.heading {

font: 16px/32px Arial, sans-serif;

padding-top: 50px;

position: relative;

opacity: 0;

top: 16px;

}

p {

color: #b4b1b6;

font: 12px/18px Arial, sans-serif;

margin: 0 auto;

top: 16px;

opacity: 0;

position: relative;

}

.animated .b-comment--svg > rect {

-webkit-transition: 0.6s ease-in-out;

transition: 0.6s ease-in-out;

stroke-dashoffset: 0;

}

.animated .b-comment--user {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: 0.3s 0.4s;

transition: 0.3s 0.4s;

}

.animated .b-comment--line-1 {

-webkit-transition: 0.44s 0.4s;

transition: 0.44s 0.4s;

width: 67px;

}

.animated .b-comment--line-2 {

-webkit-transition: 0.28s 0.6s;

transition: 0.28s 0.6s;

width: 53px;

}

.animated .b-comment--line-3 {

-webkit-transition: 0.28s 0.6s;

transition: 0.28s 0.6s;

width: 26px;

}

.animated .b-comment--line-4 {

-webkit-transition: 0.44s 0.72s;

transition: 0.44s 0.72s;

width: 148px;

}

.animated .b-comment--line-5 {

-webkit-transition: 0.36s 0.76s;

transition: 0.36s 0.76s;

width: 89px;

}

.animated .b-comment--bell {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: 0.3s 1.6s;

transition: 0.3s 1.6s;

}

.animated .svg-bell {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: 0.2s 1.76s;

transition: 0.2s 1.76s;

}

.animated .block-top,

.animated .block-bottom {

-webkit-transition: 0.28s 0.68s;

transition: 0.28s 0.68s;

opacity: 1;

bottom: 0;

}

.animated .heading {

-webkit-transition: 0.36s 1s;

transition: 0.36s 1s;

opacity: 1;

top: 0;

}

.animated p {

-webkit-transition: 0.2s 1.16s;

transition: 0.2s 1.16s;

opacity: 1;

top: 0;

}

.animated .rotate {

-webkit-animation: rotate 0.28s 1.96s;

animation: rotate 0.28s 1.96s;

}

@-webkit-keyframes rotate {

20% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

58% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

100% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@keyframes rotate {

20% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

58% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

100% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}