css 翻日历,CSS3 日历卡

谁践踏了优雅 2022-09-02 14:51 210阅读 0赞

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;