html5 css3雪花效果,HTML5 | CSS3水晶皇冠雪花形状-CSDN博客

CSS

语言：

CSSSCSS

确定

*:after,

*:before {

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

body {

background: -webkit-linear-gradient(top left, #7DA7D9, #7d81d9);

background: linear-gradient(to bottom right, #7DA7D9, #7d81d9);

}

.snowflake {

position: relative;

font-size: 300px;

font-size: 50vmin;

}

.spindle {

background: rgba(241, 241, 241, 0.5);

border-radius: 1em;

height: 1em;

left: -0.025em;

position: absolute;

top: -.5em;

width: 0.05em;

}

.spindle:before,

.spindle:after {

border: .01em dotted;

content: '';

position: absolute;

background: transparent;

display: block;

color: rgba(241, 241, 241, 0.5);

}

.spindle:before {

width: .05em;

height: .05em;

border-radius: 100%;

left: .22em;

top: .1em;

box-shadow: -0.025em -0.05em 0 -0.01em rgba(241, 241, 241, 0.3), -0.055em -0.075em 0 -0.015em rgba(241, 241, 241, 0.2), -0.085em -0.08em 0 -0.02em rgba(241, 241, 241, 0.1);

}

.spindle:after {

border-radius: 100% 50% 20%;

width: .2em;

height: .2em;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: .77em;

left: -.075em;

box-shadow: -0.05em -0.05em 0 -0.03em rgba(241, 241, 241, 0.9), -0.1em -0.1em 0 -0.035em rgba(241, 241, 241, 0.6), -0.15em -0.15em 0 -0.04em rgba(241, 241, 241, 0.3), -0.2em -0.2em 0 -0.05em rgba(241, 241, 241, 0.1);

}

.spindle:nth-child(1) {

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

.spindle:nth-child(2) {

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.spindle:nth-child(3) {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);