烟花的代码
HTML5 Canvas超炫酷3D烟花动画DEMO演示
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:#000000;
}
#canvas{
width:100%;
height:100%;
margin-left: 200px;
}
#stage {
perspective: 1000px;
-webkit-perspective: 1000px;
}
#container {
width: 1000px;
height: 800px;
position: relative;
margin: 100px auto;
transform: rotateX(-30deg) rotateY(0deg);
transform-style: preserve-3d;
animation: scroll 8s linear infinite;
}
#container:hover {
animation-play-state: paused;
}
#container div {
position: absolute;
top: 150px;
left: 400px;
}
#container div:nth-child(1) {
transform: translateZ(300px);
}
#container div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
#container div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
#container div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
#container div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
#container div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
@keyframes scroll {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
100% {
transform: rotateX(-30deg) rotateY(360deg);
}
}