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 {

}

@-o-keyframes bang {

to {

}

@-ms-keyframes bang {

to {

}

@keyframes bang {

to {

}

@-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%;

}