HTML5 | CSS3水晶皇冠雪花形状

一款纯CSS非常漂亮灵巧的雪花图案

CSS3,SNOW

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2963
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*: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);
}
.spindle:nth-child(4) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}
.spindle:nth-child(5) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}
.spindle:nth-child(6) {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

HTML

一款纯CSS非常漂亮灵巧的雪花图案

CSS3,SNOW

编辑器支持Emmet

快捷键

一款纯CSS非常漂亮灵巧的雪花图案

CSS3,SNOW

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

HTML5 CSS3蜂巢（六边形）形状的页面布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：