3

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

 1 year ago
source link: https://www.fly63.com/article/detial/12284
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

扫一扫分享

来自程序员的浪漫，给大家分享一款新年纯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://www.fly63.com/article/detial/12284


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK