css3 烟 蚊香_CSS3实现烟花特效 --web前端

简单的烟花特效，比较简单，直接贴代码了……

css3实现烟花特效

* {

margin: 0;

padding: 0;

}

html{

width: 100%;

height: 100%;

}

body{

width: 100%;

height: 100%;

}

#container{

width: 100%;

height: 100%;

background-color: black;

position: relative;

}

#fireworks{

position: absolute;

left: 50%;

margin-left: -250px;

bottom: 60%;

margin-bottom: -180px;

transform: scale(0);

animation: fireworks 5s 3s;

}

@keyframes fireworks {

0%{

transform: scale(0);

}

80%{

transform: scale(1);

}

100%{

opacity: 0;

}

}

#firecracker{

position: absolute;

left: 50%;

bottom: 0%;

margin-left: -4px;

animation: firecracker 3s forwards;

}

@keyframes firecracker {

0%{

transform: scale(1);

bottom: 0%;

}

100%{

bottom: 60%;

transform: scale(0);

}

}

素材：

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！