css3实现烟花效果,CSS3 带颤动效果的简易烟花动效
CSS
語言：
CSSSCSS
確定
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
}
.pyro > .before,
.pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-moz-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-o-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-ms-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-webkit-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-moz-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-o-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-ms-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-webkit-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-moz-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-o-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-ms-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
總結
以上是生活随笔為你收集整理的css3实现烟花效果,CSS3 带颤动效果的简易烟花动效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css搜索框变圆脸角,CSS浮动布局
- 下一篇： 虚拟机玩转缓存服务器,Nginx服务器中