CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');

@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');

@keyframes calendar-flip {

0% {

transform: rotate(0deg);

transform-origin: top left;

animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);

}

30% {

transform-origin: top left;

transform: rotate(45deg);

animation-timing-function: cubic-bezier(.13, .84, .82, 1);

}

50% {

transform: translateX(0px) translateY(100px) rotate(90deg, 20deg);

}

100% {

transform: translateY(200vh) rotate(90deg);

}

}

body {

overflow: hidden;

}

h1.title {

text-align: center;

color: white;

font-family: 'Arima Madurai', cursive;

}

.december {

animation: calendar-flip 4s 1s forwards ease-in-out;

z-index: 2;

}

body {

background: #355161;

}

.calendar-wrapper {

position: absolute;

left: calc(50% - 125px);

width: 250px;

height: 400px;

margin: 0 auto;

padding: 10px;

display: inline-block;

background: white;

transform-origin: left center;

}

*,

*:before,

*:after {

box-sizing: border-box;

}

.month-wrapper {

width: 100%;

height: 100%;

}

.december .month-wrapper {

background: #211f20;

}

.january .month-wrapper {

background: #f4bdb8;

}

.year {

margin: 0;

font-size: 16px;

}

.month-name {

margin: 2px 0 10px 0;

text-transform: capitalize;

}

.month-days {

position: absolute;

bottom: 10px;

height: 52%;

width: 80%;

left: 10%;

padding: 10px;

border-radius: 50% 50% 0 0;

background: #fff;

font-family: 'Berkshire Swash', cursive;

text-align: center;

font-size: 14px;

}

.december .days-holder time:first-child {

margin-left: 57%;

}

.days-holder,

.week-days {

display: block;

width: 100%;

padding: 5px 0;

}

.days-holder {

text-align: left;

margin-left: 8px;

}

.days-holder time {

width: 14.28%;

display: inline-block;

}

.december .days-holder time:nth-child(7n+4) {

color: red;

}

.january .days-holder time:nth-child(7n+1) {

color: red;

}

.month-days .week-days span {

width: 12.5%;

display: inline-block;

}

/* ANIMAL PART */

.december .month-animal {

width: 100%;

height: 100%;

}

.december .month-animal-head {

width: 100%;

height: 42%;

background: #f0efea;

border-radius: 0 0 50% 50%;

}

.december .animal-eye-left,

.december .animal-eye-right {

position: absolute;

width: 18%;

height: 15%;

background: #211f20;

border-radius: 40%;

top: 10%;

}

.december .animal-eye-left {

left: 25%;

transform: rotate(25deg);

}

.december .animal-eye-right {

right: 25%;

transform: rotate(-25deg);

}

.december .eye-left-inner,

.december .eye-right-inner {

position: absolute;

background: white;

border-radius: 50%;

width: 40%;

height: 30%;

top: 25%;

}

.december .eye-left-inner,

.december .eye-right-inner {

left: 30%;

}

.december .eye-left-inner:before,

.december .eye-right-inner:before {

content: "";

position: absolute;

width: 50%;

height: 50%;

border-radius: 50%;

background: #211f20;

left: 25%;

top: 15%;

}

.december .animal-nose {

position: absolute;

top: 23%;

left: 41.5%;

width: 17%;

height: 7%;

background: #211f20;

border-radius: 50% 50% 30% 30%;

font-family: 'Berkshire Swash', cursive;

}

.december .animal-nose:before {

content: ",";

position: absolute;

color: white;

transform: rotate(-90deg);

left: 35%;

font-size: 30px;

top: -35%;

}

.december .animal-nose:after {

content: ",";

position: absolute;

top: 115%;

left: 23%;

color: #211f20;

font-size: 70px;

transform: rotate(180deg);

transition: all 1s ease-in-out;

}

.january .animal-eye-left,

.january .animal-eye-right {

position: absolute;

width: 7%;

height: 5%;

background: black;

border-radius: 50%;

top: 17%;

}

.january .animal-eye-left {

left: 37%;

}

.january .animal-eye-right {

right: 37%;

}

.january .animal-nose {

position: absolute;

width: 26%;

height: 12%;

background: #e6a79a;

border-radius: 50%;

top: 26%;

left: 37%;

}

.january .animal-nose:before,

.january .animal-nose:after {

content: "";

position: absolute;

width: 20%;

height: 30%;

background: #a10d17;

border-radius: 50%;

top: 35%;

}

.january .animal-nose:before {

left: 20%;

}

.january .animal-nose:after {

right: 20%;

}

.january .animal-mouth {

position: absolute;

top: 31%;

left: 43%;

width: 14%;

height: 10%;

border-radius: 50%;

border: 3px solid transparent;

border-bottom-color: #864b5b;

}