css 翻日历,CSS3 日历卡

CSS

语言：

CSSSCSS

确定

body {

background: #304550;

}

#sunset {

background: linear-gradient(rgba(128, 0, 128, 0.1), #fff 35%, #fff 65%, rgba(128, 0, 128, 0.1)), #fff;

box-shadow: 0 0 10px #222, 0 0 50px #444;

font: 400 12px/1.4em 'Open Sans', sans-serif;

height: 580px;

margin: 50px auto;

padding: 30px 0;

width: 360px;

}

#sunset * {

box-sizing: border-box;

margin: 0;

padding: 0;

}

#sunset .sunset-location,

#sunset .sunset-date {

background: #333;

display: block;

height: 60px;

padding: 0 15px;

position: relative;

}

#sunset .sunset-location h2,

#sunset .sunset-date h2 {

color: #fff;

font-size: 2em;

line-height: 60px;

text-transform: uppercase;

}

#sunset .sunset-location h2 > span,

#sunset .sunset-date h2 > span {

font-weight: 400;

}

#sunset .header h2:after {

content: '\f124';

font-family: 'FontAwesome';

float: right;

}

#sunset .footer h2:after {

content: '\f073';

font-family: 'FontAwesome';

float: right;

}

#sunset .sunset-time {

height: 460px;

padding: 80px 0;

}

#sunset .sunset-time .sunset-time-container {

background: #fff;

border-radius: 50%;

height: 300px;

margin: 0 auto;

width: 300px;

}

#sunset .sunset-time .sunset-time-container:before {

border-radius: 50%;

box-shadow: -162px 0 0 #aaa, 162px 0 0 #aaa, 0 -162px 0 #aaa, 0 162px 0 #aaa, -115px -115px 0 #aaa, 115px -115px 0 #aaa, 115px 115px 0 #aaa, -115px 115px 0 #aaa;

content: '';

display: block;

height: 10px;

position: relative;

left: 145px;

top: 145px;

width: 10px;

z-index: 99;

}

#sunset .sunset-time .sunset-time-container:after {

border-radius: 50%;

box-shadow: -157px -42px 0 #ccc, -141px -81px 0 #ccc, -81px -141px 0 #ccc, -42px -157px 0 #ccc, 157px -42px 0 #ccc, 141px -81px 0 #ccc, 81px -141px 0 #ccc, 42px -157px 0 #ccc, 157px 42px 0 #ccc, 141px 81px 0 #ccc, 81px 141px 0 #ccc, 42px 157px 0 #ccc, -157px 42px 0 #ccc, -141px 81px 0 #ccc, -81px 141px 0 #ccc, -42px 157px 0 #ccc;

content: '';

display: block;

height: 6px;

position: relative;

top: -143px;

/*transform: rotate(22.5deg);*/

left: 147px;

width: 6px;

z-index: 99;

}

#sunset .sunset-time .sunset-time-clock {

background: #fff;

background-clip: padding-box;

border-color: #ffba00 #ffba00 #333 #ffba00;

border-style: solid;

border-width: 30px;

border-radius: 50%;

height: 300px;

margin: -10px auto;

padding: 10px;

width: 300px;

}

#sunset .sunset-time .sunset-time-clock:after {

background: #fff;

border-radius: 50%;

content: '';

display: block;

height: 25px;

position: relative;

top: -258px;

left: 97px;

width: 25px;

z-index: 99;

}

#sunset .current-time {

border: 5px solid rgba(187, 187, 187, 0.15);

border-radius: 50%;

color: #333;

display: block;

font-size: 3.85em;

font-weight: 400;

height: 220px;

line-height: 210px;

text-align: center;

width: 220px;

}

#sunset .current-time > span {

font-size: 0.5em;

}

#sunset .current-time:after {

content: '\f017';

display: block;

font-family: 'FontAwesome';

font-size: 0.6em;

position: relative;

top: -135px;

}