来自程序员的浪漫_css3新年烟花效果

更新日期: 2023-01-01 阅读: 1.3k 标签: 效果分享

来自程序员的浪漫，给大家分享一款新年纯css3放烟花动画特效，没有使用任何js代码，可作为生日、过节、婚庆网页背景特效，希望大家喜欢。

代码如下：

<div class="firebox_grp firebox_grp2">
	<div class="firebox size05 pos1 ">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size08 pos2 delay1">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox pos3 delay2">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size15 pos4 ">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size18 pos5 delay1">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size20 pos6 delay2">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size13 pos7">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size05 pos8">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
</div>
<div class="firebox_grp firebox_grp3">
	<div class="firebox size05 pos1 ">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size08 pos2 delay1">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox pos3 delay2">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size15 pos4 ">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size18 pos5 delay1">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size20 pos6 delay2">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size13 pos7">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
	<div class="firebox size05 pos8">
		<div class="dropboxs-grp">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
		<div class="dropboxs-grp dropboxs-grp2">
			<span class="dropbox dropbox_1"></span>
			<span class="dropbox dropbox_2"></span>
			<span class="dropbox dropbox_3"></span>
			<span class="dropbox dropbox_4"></span>
		</div>
	</div>
</div>

<style>
.firebox_grp {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    color: #535396;
	z-index: 0;
}
.firebox_grp2{
    transform: rotate(180deg);
    color: #2C1C44;
    z-index: 6;
}
.firebox_grp3{
    transform: rotate(-75deg);
    color: #E339BD;
    z-index: 7;
}
.firebox {
    font-size: 10px;
    display: block;
    width: 8.5em;
    height: 8.5em;
    position: absolute;
}
/*------------------------------------*/
.s05 {
    transform: scale(0.5);
}
.s08 {
    transform: scale(0.8);
}
.s13 {
    transform: scale(1.3);
}
.s15 {
    transform: scale(1.5);
}
.s18 {
    transform: scale(1.8);
}
.s20 {
    transform: scale(2);
}
/*------------------------------------*/
.posli1 {
    left: 56%;
    top: 65%;
}
.posli2 {
    left: 25%;
    top: 15%;
}
.posli3 {
    left: 50%;
    top: 25%;
}
.posli4 {
    left: -5%;
    top: 50%;
}
.posli5 {
    left: 90%;
    top: 65%;
}
.posli6 {
    left: 35%;
    top: 75%;
}
.posli7 {
    left: 5%;
    top: -5%;
}
.posli8 {
    left: 75%;
    top: 20%;
}
/*------------------------------------*/
.dropboxs-grp {
    display: block;
    width: 8.5em;
    height: 8.5em;
    position: absolute;
}
.dropboxs-grp2 {
    display: block;
    width: 8.5em;
    height: 8.5em;
    position: absolute;
    transform: rotate(45deg);
}
.dropbox {
    display: block;
    width: 1em;
    height: 2em;
    overflow: hidden;
    position: absolute;
    opacity: 0;
}
.dropbox:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    border-radius: 50%;
}
.dropbox:after {
    content: "";
    display: block;
    position: relative;
    top: -0.4em;
    width: 0;
    height: 0;
    border-top: 1.4em solid currentColor;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
}
.dropbox_1 {
    left:3.75em;
    top: 0;
    animation: dropbox1anim 1s ease-in-out infinite;
}
.dropbox_2 {
    top: 3.25em;
    right: 0;
    animation: dropbox2anim 1s ease-in-out infinite;
}
.dropbox_3 {
    left:3.75em;
    bottom: 0;
    animation: dropbox3anim 1s ease-in-out infinite;
}
.dropbox_4 {
    top: 3.25em;
    left: 0;
    animation: dropbox4anim 1s ease-in-out infinite;
}
.firebox_2 .dropbox_1 {
    animation-delay: 0.5s
}
.firebox_2 .dropbox_2 {
    animation-delay: 0.5s
}
.firebox_2 .dropbox_3 {
    animation-delay: 0.5s
}
.firebox_2 .dropbox_4 {
    animation-delay: 0.5s
}
/*------------------------------------*/
.delay1 .dropbox_1 {
    animation-delay: 0.25s
}
.delay1 .dropbox_2 {
    animation-delay: 0.25s
}
.delay1 .dropbox_3 {
    animation-delay: 0.25s
}
.delay1 .dropbox_4 {
    animation-delay: 0.25s
}
.delay2 .dropbox_1 {
    animation-delay: 0.75s
}
.delay2 .dropbox_2 {
    animation-delay: 0.75s
}
.delay2 .dropbox_3 {
    animation-delay: 0.75s
}
.delay2 .dropbox_4 {
    animation-delay: 0.75s
}
/*---------------动画---------------------*/
@keyframes dropbox1 {
    0% {
        top:3.25em;
        opacity: 0;
        transform: scale(0.3);
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        top: -0.75em;
        opacity: 0;
        transform: scale(0.3);
    }
}
@keyframes dropbox2 {
    0% {
        right:3.75em;
        opacity: 0;
        transform: scale(0.3) rotate(90deg);
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(90deg);
    }
    100% {
        right: -0.25em;
        opacity: 0;
        transform: scale(0.3) rotate(90deg);
    }
}
@keyframes dropbox3 {
    0% {
        bottom:3.25em;
        opacity: 0;
        transform: scale(0.3) rotate(180deg);
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        bottom: -0.75em;
        opacity: 0;
        transform: scale(0.3) rotate(180deg);
    }
}
@keyframes dropbox4 {
    0% {
        left:3.75em;
        opacity: 0;
        transform: scale(0.3) rotate(-90deg);
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
		}
		100% {
        left: -0.25em;
        opacity: 0;
        transform: scale(0.3) rotate(-90deg);
    }
}
</style>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/12284

上一页: 给网站添加新年灯笼效果(纯css实现) 下一页: JavaScript中如何将十进制转换为十六进制？

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

来自程序员的浪漫_css3新年烟花效果

使用 JavaScript 实现分屏视觉效果

CSS3的过渡效果，使用transition实现鼠标移入/移出效果

js如何实现新手引导效果？

css3 斜切角/斜边的实现方式

JavaScript 实现打字机效果,跑马灯效果

CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)

纯css实现气泡效果

css文字选中效果

text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果文字背景图遮罩

Vue 中多个元素、组件的过渡，及列表过渡

来自程序员的浪漫_css3新年烟花效果

使用 JavaScript 实现分屏视觉效果

CSS3的过渡效果，使用transition实现鼠标移入/移出效果

js如何实现新手引导效果？

css3 斜切角/斜边的实现方式

JavaScript 实现打字机效果,跑马灯效果

CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)

纯css实现气泡效果

css文字选中效果

text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

Vue 中多个元素、组件的过渡，及列表过渡

text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果文字背景图遮罩