最近看到几篇有关css的文章，纯css实现各种复杂效果，甚至可以获取用户密码并发送到指定位置，甚是震撼。闲暇之余，利用自己现有的css基础，实现了本作品，同时练习一下许久不用的CSS3技能（技术分享，不考虑兼容性）。
话不多说，先上动图：
这是播放效果
看起来比较复杂，其实不然。运用的技术点如下：
- 转换transform
- 动画animation
- 渐变linear-gradient与圆角border-radius
- 盒子阴影box-shadow
HTML结构如下：
flower
复制代码.flower-container类是最大的容器，里面两个元素分别是星空#bg-star和花朵容器#flower-outer。由于花瓣有3层，所以#flower-outer内依次嵌套了两层，没错，span元素就是花瓣，每层8个瓣。
千呼万唤始出来，CSS代码马上出来：
body{
font-size: 20px;
height: 100%;
width: 100%;
background:#000;
overflow: hidden;
}
复制代码星空：
#bg-star{
top: 30%;
left: 30%;
height: 2px;
width: 2px;
position: absolute;
transform-style: preserve-3d;
box-shadow: 10em 10em yellow,
2.5em 10em white,10em 5em yellow,
20em 0em white,0em 20em white,
20em 20em white,25em 20em lightyellow,
40em 35em white,25em 40em white,
10em 50em white,60em 0em white,
5em 0em white,15em 40em yellow,
45em 30em white,30em 20em lightyellow,
35em 15em white,15em 35em yellow;
transform-origin: -10em 10em;
animation: stars 20s linear infinite;
复制代码} @keyframes stars{ from{ transform: translateZ(0em) rotate(0deg);
}
to{
transform: translateZ(80em) rotate(360deg);
}
复制代码}
为了展现出立体感和距离感
#bg-star:before,#bg-star:after{
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: white;
box-shadow: inherit;
复制代码}
#bg-star:before{ transform: translateZ(-100em); }
#bg-star:after{ transform: translateZ(-50em); }
最关键的花瓣部分
这是每层花瓣的容器（不包含星空容器）公共样式
#flower-container div:not(:empty){
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
复制代码}
最外层
#flower-outer{
height: inherit;
width: inherit;
margin: -12.5em 0 0 -12.5em;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateZ(20deg);
animation: outerdiv 10s linear infinite alternate;//这是外层容器的动画
复制代码}
@keyframes outerdiv{
0%{
transform: rotateX(30deg) rotateZ(20deg);
}
100%{
transform: rotateX(30deg) rotateZ(380deg);
}
复制代码}
中层
#flower-center{
height: 18em;
width: 18em;
margin: -9em 0 0 -9em;
transform-style: preserve-3d;
transform: rotateZ(22.5deg);
复制代码}
内层
#flower-inner{
height: 10em;
width: 10em;
margin: -5em 0 0 -5em;
transform-style: preserve-3d;
transform: rotateZ(-22.5deg);
复制代码}
这是每层花瓣的公共样式
外层
.flower-outer{
top: 0.5em;
height: 12em;
width: 5em;
margin-left: -1.5em;
opacity: 0.6;
复制代码}
中层
.flower-center{
height: 9em;
width: 4em;
margin-left: -1em;
opacity: 0.8;
复制代码}
内层
.flower-inner{
height: 5em;
width: 2.5em;
margin-left: -0.75em;
opacity: 0.9;
复制代码}
下面就是各种花瓣位置调整和动画了
.outer1{
transform: rotateZ(0deg) rotateX(-15deg);
animation: flowerouter1 2s ease-in-out 1s backwards;
复制代码}
.center1{
transform: rotateZ(0deg) rotateX(-30deg);
animation: flowercenter1 3s ease-in-out 2s backwards;
复制代码}
.inner1{
transform: rotateZ(0deg) rotateX(-60deg);
animation: flowerinner1 4s ease-in-out 3s backwards;
复制代码}
.outer2{
transform: rotateZ(45deg) rotateX(-15deg);
animation: flowerouter2 2s ease-in-out 1s backwards;
复制代码}
.center2{
transform: rotateZ(45deg) rotateX(-30deg);
animation: flowercenter2 3s ease-in-out 2s backwards;
复制代码}
.inner2{
transform: rotateZ(45deg) rotateX(-60deg);
animation: flowerinner2 4s ease-in-out 3s backwards;
复制代码}
.outer3{
transform: rotateZ(90deg) rotateX(-15deg);
animation: flowerouter3 2s ease-in-out 1s backwards;
复制代码}
.center3{
transform: rotateZ(90deg) rotateX(-30deg);
animation: flowercenter3 3s ease-in-out 2s backwards;
复制代码}
.inner3{
transform: rotateZ(90deg) rotateX(-60deg);
animation: flowerinner3 4s ease-in-out 3s backwards;
复制代码}
.outer4{
transform: rotateZ(135deg) rotateX(-15deg);
animation: flowerouter4 2s ease-in-out 1s backwards;
复制代码}
.center4{
transform: rotateZ(135deg) rotateX(-30deg);
animation: flowercenter4 3s ease-in-out 2s backwards;
复制代码}
.inner4{
transform: rotateZ(135deg) rotateX(-60deg);
animation: flowerinner4 4s ease-in-out 3s backwards;
复制代码}
.outer5{
transform: rotateZ(180deg) rotateX(-15deg);
animation: flowerouter5 2s ease-in-out 1s backwards;
复制代码}
.center5{
transform: rotateZ(180deg) rotateX(-30deg);
animation: flowercenter5 3s ease-in-out 2s backwards;
复制代码}
.inner5{
transform: rotateZ(180deg) rotateX(-60deg);
animation: flowerinner5 4s ease-in-out 3s backwards;
复制代码}
.outer6{
transform: rotateZ(225deg) rotateX(-15deg);
animation: flowerouter6 2s ease-in-out 1s backwards;
复制代码}
.center6{
transform: rotateZ(225deg) rotateX(-30deg);
animation: flowercenter6 3s ease-in-out 2s backwards;
复制代码}
.inner6{
transform: rotateZ(225deg) rotateX(-60deg);
animation: flowerinner6 4s ease-in-out 3s backwards;
复制代码}
.outer7{
transform: rotateZ(270deg) rotateX(-15deg);
animation: flowerouter7 2s ease-in-out 1s backwards;
复制代码}
.center7{
transform: rotateZ(270deg) rotateX(-30deg);
animation: flowercenter7 3s ease-in-out 2s backwards;
复制代码}
.inner7{
transform: rotateZ(270deg) rotateX(-60deg);
animation: flowerinner7 4s ease-in-out 3s backwards;
复制代码}
.outer8{
transform: rotateZ(315deg) rotateX(-15deg);
animation: flowerouter8 2s ease-in-out 1s backwards;
复制代码}
.center8{
transform: rotateZ(315deg) rotateX(-30deg);
animation: flowercenter8 3s ease-in-out 2s backwards;
复制代码}
.inner8{
transform: rotateZ(315deg) rotateX(-60deg);
animation: flowerinner8 4s ease-in-out 3s backwards;
复制代码}
@keyframes flowerouter1{
from{
transform: rotateZ(0deg) rotateX(-90deg);
}
to{
transform: rotateZ(0deg) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter2{
from{
transform: rotateZ(45deg) rotateX(-90deg);
}
to{
transform: rotateZ(45deg) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter3{
from{
transform: rotateZ(90deg) rotateX(-90deg);
}
to{
transform: rotateZ(90deg) rotateX(-15);
}
复制代码}
@keyframes flowerouter4{
from{
transform: rotateZ(135deg) rotateX(-90deg);
}
to{
transform: rotateZ(135deg) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter5{
from{
transform:rotateZ(180deg) rotateX(-90deg);
}
to{
transform:rotateZ(180) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter6{
from{
transform:rotateZ(225deg) rotateX(-90deg);
}
to{
transform:rotateZ(225deg) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter7{
from{
transform:rotateZ(270deg) rotateX(-90deg);
}
to{
transform:rotateZ(270deg) rotateX(-15deg);
}
复制代码}
@keyframes flowerouter8{
from{
transform:rotateZ(315deg) rotateX(-90deg);
}
to{
transform:rotateZ(315deg) rotateX(-15deg);
}
复制代码}
@keyframes flowercenter1{
from{
transform:rotateZ(0deg) rotateX(-90deg);
}
to{
transform:rotateZ(0deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter2{
from{
transform:rotateZ(45deg) rotateX(-90deg);
}
to{
transform:rotateZ(45deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter3{
from{
transform:rotateZ(90deg) rotateX(-90deg);
}
to{
transform:rotateZ(90deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter4{
from{
transform:rotateZ(135deg) rotateX(-90deg);
}
to{
transform:rotateZ(135deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter5{
from{
transform:rotateZ(180deg) rotateX(-90deg);
}
to{
transform:rotateZ(180deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter6{
from{
transform:rotateZ(225deg) rotateX(-90deg);
}
to{
transform:rotateZ(225deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter7{
from{
transform:rotateZ(270deg) rotateX(-90deg);
}
to{
transform:rotateZ(270deg) rotateX(-30deg);
}
复制代码}
@keyframes flowercenter8{
from{
transform:rotateZ(315deg) rotateX(-90deg);
}
to{
transform:rotateZ(315deg) rotateX(-30deg);
}
复制代码}
@keyframes flowerinner1{
from{
transform:rotateZ(0deg) rotateX(-90deg);
}
to{
transform:rotateZ(0deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner2{
from{
transform:rotateZ(45deg) rotateX(-90deg);
}
to{
transform:rotateZ(45deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner3{
from{
transform:rotateZ(90deg) rotateX(-90deg);
}
to{
transform:rotateZ(90deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner4{
from{
transform:rotateZ(135deg) rotateX(-90deg);
}
to{
transform:rotateZ(135deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner5{
from{
transform:rotateZ(180deg) rotateX(-90deg);
}
to{
transform:rotateZ(180deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner6{
from{
transform:rotateZ(225deg) rotateX(-90deg);
}
to{
transform:rotateZ(225deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner7{
from{
transform:rotateZ(270deg) rotateX(-90deg);
}
to{
transform:rotateZ(270deg) rotateX(-60deg);
}
复制代码}
@keyframes flowerinner8{
from{
transform:rotateZ(315deg) rotateX(-90deg);
}
to{
transform:rotateZ(315deg) rotateX(-60deg);
}
复制代码}