纯CSS实现的红罂粟花

红罂粟象征着美丽、纪念，是一个关乎牺牲、爱、尊重和怀念的主题。

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.poppy {
    height: 90px;
    width: 90px;
    position: absolute;
    top: calc(50% - 45px);
    left: calc(50% - 45px);
    text-align: center;
}
.poppy .pedal {
    height: 50px;
    width: 50px;
    background: linear-gradient(to bottom right, red, #990000);
    position: absolute;
    border-radius: 70% 40% 40% 40%;
}
.poppy .pedal:nth-child(1) {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
    z-index: 998;
}
.poppy .pedal:nth-child(2) {
    transform: rotate(90deg);
    left: 35px;
    top: 0px;
}
.poppy .pedal:nth-child(3) {
    transform: rotate(270deg);
    left: 0px;
    top: 35px;
}
.poppy .pedal:nth-child(4) {
    transform: rotate(180deg);
    left: 35px;
    top: 35px;
}
.poppy .center {
    position: absolute;
    top: 30px;
    left: 37.5px;
    z-index: 99999;
}
.poppy .center .line {
    height: 25px;
    width: 10px;
    border-radius: 100%;
    background: #000;
    position: absolute;
}
.poppy .center .line:nth-child(2) {
    transform: rotate(90deg);
}
.poppy .center .line:nth-child(3) {
    transform: rotate(135deg);
}
.poppy .center .line:nth-child(4) {
    transform: rotate(-135deg);
}
.poppy h1,
.poppy h2 {
    position: absolute;
    top: 90px;
    width: 250px;
    font-family: 'Droid Serif';
    left: calc(50% - 125px);
    text-shadow: 0px 2px 5px #666;
}
.poppy h2 {
    top: 135px;
}

HTML

红罂粟象征着美丽、纪念，是一个关乎牺牲、爱、尊重和怀念的主题。

CSS3

编辑器支持Emmet

快捷键

红罂粟象征着美丽、纪念，是一个关乎牺牲、爱、尊重和怀念的主题。

CSS3

纯CSS（使用box-shadow）实现的烟花动画

纯CSS3实现的3D地形（地图）构造器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：