动画烟花绽放的效果

来源：互联网发布：软件工作室英文缩写编辑：程序博客网时间：2024/04/26 07:12

用百度搜索了很久，好吧，其实原来找的时候也看到了可以用的只是觉得有些些丑就没有用的。

然后我又上了https://codepen.io/ 找动效效果

呀，他们一用其他的比如好吧，比如我没掌握那些的心语法的而且用到醒目里面还要配置一些些的我都不敢用。。。。、

然后找了很久也没有找到怎么合适的烟花的动画

还有去年的活动页国庆节的时候有烟花效果然后就直接拿过来了

开始为了和主题色符合我还特意改了一下那些烟花颗粒的颜色，后来发现有些多余哈

啊呀，有时候看别人写的东西觉得自己就是个小辣鸡，呜呜

我把代码黏贴一下吧，我再想以后会不会这个笔记本我找不到了，而且会不会直接被我弃更了，因为很久没有整理了，说实话我自己也觉得很乱了咯。

html:

css:

/*烟花*/

.pyro>.before,

.pyro>.after {

position: absolute;

width: 4px;

height: 4px;

border-radius: 80%;

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: 85px -170.33333px #00ffee, -93px -14.33333px #b700ff, 186px -68.83333px #00a2ff, 58px -47.83333px #ff3300, 25px -139.33333px #ff8800, -92.5px -165.833333px #f200ff, 13.5px -82.33333px #ffa200, 55px 17.666667px #00ff33, 60.5px -50.33333px #6a00ff, 40.5px 25.666667px #0080ff, 41.5px -126.83333px #00f7ff, -21px -86.83333px #ff1a00, -66.5px -139.83333px #0033ff, 37.5px 40.66667px #ff0091, 79px -146.33333px #ff1100, -28px -149.33333px #ff3300, 62px -79.33333px #00ff09, -35.5px -153.33333px #7700ff, 70.5px -85.33333px #00ff2b, 100.5px -153.33333px #66ff00, -53.5px 15.166667px #9500ff, 51px -198.83333px #00ff9d, 10.5px -140.83333px #dd00ff, 82.5px -120.83333px #6200ff, 101px -91.83333px #ff00f7, 50.5px -27.33333px #2600ff, 46.5px -23.33333px #ff006a, 45.5px -188.33333px #88ff00, 101.5px -87.83333px #ff002b, -7.5px -101.83333px #84ff00, -115px -187.83333px #2f00ff, -85px -77.83333px #00ff22, -24.5px -154.3333px #00ff22, -9px -109.3333px #ff7b00, -61px 10.66667px #33ff00, -76.5px -79.83333px #00ff40, 75px 26.166667px #00ff9d, 87.5px -108.33333px #7300ff, -124.5px 40.67777px #00ff15, -24.5555px -201.83333px #0026ff, -46px -176.83333px #1eff00, -11.5px -15.83333px #ff0011, 77.5px -136.33333px #ff0088, -32px -153.833333px #008cff, 25.5px -156.33333px #22ff00, 64.5px 21.66667px #ff0011, -36.5px 29.16666px #00ff3c, -106.5px 9.166667px #00ff55, 7px 40.166667px #00ffaa, -60.5px -169.33333px #00a6ff, 51.5px -37.833333px #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;

}

@-webkit-keyframes gravity {

to {

transform: translateY(20px);

-moz-transform: translateY(20px);

-webkit-transform: translateY(20px);

-o-transform: translateY(20px);

-ms-transform: translateY(20px);

opacity: 0;

}

@-moz-keyframes gravity {

to {

transform: translateY(20px);

-moz-transform: translateY(20px);

-webkit-transform: translateY(20px);

-o-transform: translateY(20px);

-ms-transform: translateY(20px);

opacity: 0;

}

@-o-keyframes gravity {

to {

transform: translateY(20px);

-moz-transform: translateY(20px);

-webkit-transform: translateY(20px);

-o-transform: translateY(20px);

-ms-transform: translateY(20px);

opacity: 0;

}

@-ms-keyframes gravity {

to {

transform: translateY(20px);

-moz-transform: translateY(20px);

-webkit-transform: translateY(20px);

-o-transform: translateY(20px);

-ms-transform: translateY(20px);

opacity: 0;

}

@keyframes gravity {

to {

transform: translateY(20px);

-moz-transform: translateY(20px);

-webkit-transform: translateY(20px);

-o-transform: translateY(20px);

-ms-transform: translateY(20px);

opacity: 0;

}

@-webkit-keyframes position {

0%,

19.9% {

margin-top: 14%;

margin-left: 0%;

}

20%,

39.9% {

margin-top: 16%;

margin-left: 90%;

}

40%,

59.9% {

margin-top: 24%;

margin-left: 10%;

}

60%,

79.9% {

margin-top: 30%;

margin-left: 84%;

}

80%,

99.9% {

margin-top: 12%;

margin-left: 20%;

}

@-moz-keyframes position {

0%,

19.9% {

margin-top: 14%;

margin-left: 0%;

}

20%,

39.9% {

margin-top: 16%;

margin-left: 90%;

}

40%,

59.9% {

margin-top: 24%;

margin-left: 10%;

}

60%,

79.9% {

margin-top: 30%;

margin-left: 84%;

}

80%,

99.9% {

margin-top: 12%;

margin-left: 20%;

}

@-o-keyframes position {

0%,

19.9% {

margin-top: 14%;

margin-left: 0%;

}

20%,

39.9% {

margin-top: 16%;

margin-left: 90%;

}

40%,

59.9% {

margin-top: 24%;

margin-left: 10%;

}

60%,

79.9% {

margin-top: 30%;

margin-left: 84%;

}

80%,

99.9% {

margin-top: 12%;

margin-left: 20%;

}

@-ms-keyframes position {

0%,

19.9% {

margin-top: 14%;

margin-left: 0%;

}

20%,

39.9% {

margin-top: 16%;

margin-left: 90%;

}

40%,

59.9% {

margin-top: 24%;

margin-left: 10%;

}

60%,

79.9% {

margin-top: 30%;

margin-left: 84%;

}

80%,

99.9% {

margin-top: 12%;

margin-left: 20%;

}

@keyframes position {

0%,

19.9% {

margin-top: 14%;

margin-left: 0%;

}

20%,

39.9% {

margin-top: 16%;

margin-left: 90%;

}

40%,

59.9% {

margin-top: 24%;

margin-left: 10%;

}

60%,

79.9% {

margin-top: 30%;

margin-left: 84%;

}

80%,

99.9% {

margin-top: 12%;

margin-left: 20%;

}

烟花效果

就是那些彩色点点，哈哈

阅读全文

0 0