JS & CSS : 碎片烟花飘落

最新推荐文章于 2024-05-16 09:38:20 发布
NAGISB
最新推荐文章于 2024-05-16 09:38:20 发布
阅读量274
点赞数
文章标签： css javascript
本文链接：https://blog.csdn.net/fuyou218/article/details/126552698
版权
这篇博客探讨了如何利用CSS和JavaScript技术创建出视觉震撼的碎片烟花飘落效果。通过结合两种语言的特性，开发者可以为网页增添动态且交互式的元素，提升用户体验。
摘要由CSDN通过智能技术生成
CSS

<style>
#xuna{
     
	position: fixed;
	top: -50%;
	left: -50;
	height: 150%;
	width: 100%;
	overflow: hidden;
	z-index: 9;
	pointer-events: none;
	display: none;
}

*,
*:before,
*:after {
     
  box-sizing: inherit;
}

*:before,
*:after {
     
  content: "";
  position: absolute;
}
@-webkit-keyframes flame {
     
  50% {
     
    -webkit-transform: scale(0.8) rotate(45deg);
            transform: scale(0.8) rotate(45deg);
  }
}

@keyframes flame {
     
  50% {
     
    -webkit-transform: scale(0.8) rotate(45deg);
            transform: scale(0.8) rotate(45deg);
  }
}
.confetti {
     
  position: absolute;
  z-index: 999;
}

.confetti .rotate {
     
  -webkit-animation: driftRotate 1s infinite both ease-in-out;
          animation: driftRotate 1s infinite both ease-in-out;
  width: 100%;
  height: 100%;
}

.confetti .askew {
     
  width: 100%;
  height: 100%;
  -webkit-animation: drift 1s infinite alternate both ease-in-out;
          animation: drift 1s infinite alternate both ease-in-out;
}

.confetti:nth-child(0) .askew {
     
  -webkit-animation-duration: 1.83s;
          animation-duration: 1.83s;
  -webkit-animation-delay: -0.183s;
          animation-delay: -0.183s;
}

.confetti:nth-child(0) .rotate {
     
  -webkit-animation-duration: 1.38s;
          animation-duration: 1.38s;
  -webkit-animation-delay: -1.0212s;
          animation-delay: -1.0212s;
}

.confetti:nth-child(1) .askew {
     
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: -1.9s;
          animation-delay: -1.9s;
}

.confetti:nth-child(1) .rotate {
     
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-delay: -0.854s;
          animation-delay: -0.854s;
}

.confetti:nth-child(2) .askew {
     
  -webkit-animation-duration: 1.33s;
          animation-duration: 1.33s;
  -webkit-animation-delay: -0.266s;
          animation-delay: -0.266s;
}

.confetti:nth-child(2) .rotate {
     
  -webkit-animation-duration: 1.07s;
          animation-duration: 1.07s;
  -webkit-animation-delay: -0.7169s;
          animation-delay: -0.7169s;
}

.confetti:nth-child(3) .askew {
     
  -webkit-animation-duration: 1.85s;
          animation-duration: 1.85s;
  -webkit-animation-delay: -1.406s;
          animation-delay: -1.406s;
}

.confetti:nth-child(3) .rotate {
     
  -webkit-animation-duration: 1.37s;
          animation-duration: 1.37s;
  -webkit-animation-delay: -0.3288s;
          animation-delay: -0.3288s;
}

.confetti:nth-child(4) .askew {
     
  -webkit-animation-duration: 1.58s;
          animation-duration: 1.58s;
  -webkit-animation-delay: -1.2482s;
          animation-delay: -1.2482s;
}

.confetti:nth-child(4) .rotate {
     
  -webkit-animation-duration: 1.65s;
          animation-duration: 1.65s;
  -webkit-animation-delay: -0.198s;
          animation-delay: -0.198s;
}

.confetti:nth-child(5) .askew {
     
  -webkit-animation-duration: 1.63s;
          animation-duration: 1.63s;
  -webkit-animation-delay: -1.0432s;
          animation-delay: -1.0432s;
}

.confetti:nth-child(5) .rotate {
     
  -webkit-animation-duration: 1.97s;
          animation-duration: 1.97s;
  -webkit-animation-delay: -0.1576s;
          animation-delay: -0.1576s;
}

.confetti:nth-child(6) .askew {
     
  -webkit-animation-duration: 1.84s;
          animation-duration: 1.84s;
  -webkit-animation-delay: -1.3064s;
          animation-delay: -1.3064s;
}

.confetti:nth-child(6) .rotate {
     
  -webkit-animation-duration: 1.55s;
          animation-duration: 1.55s;
  -webkit-animation-delay: -0.5425s;
          animation-delay: -0.5425s;
}

.confetti:nth-child(7) .askew {
     
  -webkit-animation-duration: 1.87s;
          animation-duration: 1.87s;
  -webkit-animation-delay: -1.1781s;
          animation-delay: -1.1781s;
}

.confetti:nth-child(7) .rotate {
     
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -0.897s;
          animation-delay: -0.897s;
}

.confetti:nth-child(8) .askew {
     
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -0.3312s;
          animation-delay: -0.3312s;
}

.confetti:nth-child(8) .rotate {
     
  -webkit-animation-duration: 1.52s;
          animation-duration: 1.52s;
  -webkit-animation-delay: -0.4408s;
          animation-delay: -0.4408s;
}

.confetti:nth-child(9) .askew {
     
  -webkit-animation-duration: 1.72s;
          animation-duration: 1.72s;
  -webkit-animation-delay: -1.6684s;
          animation-delay: -1.6684s;
}

.confetti:nth-child(9) .rotate {
     
  -webkit-animation-duration: 1.17s;
          animation-duration: 1.17s;
  -webkit-animation-delay: -0.7254s;
          animation-delay: -0.7254s;
}

.confetti:nth-child(10) .askew {
     
  -webkit-animation-duration: 1.9s;
          animation-duration: 1.9s;
  -webkit-animation-delay: -0.836s;
          animation-delay: -0.836s;
}

.confetti:nth-child(10) .rotate {
     
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-delay: -0.025s;
          animation-delay: -0.025s;
}

.confetti:nth-child(11) .askew {
     
  -webkit-animation-duration: 1.65s;
          animation-duration: 1.65s;
  -webkit-animation-delay: -1.056s;
          animation-delay: -1.056s;
}

.confetti:nth-child(11) .rotate {
     
  -webkit-animation-duration: 1.47s;
          animation-duration: 1.47s;
  -webkit-animation-delay: -0.588s;
          animation-delay: -0.588s;
}

.confetti:nth-child(12) .askew {
     
  -webkit-animation-duration: 1.55s;
          animation-duration: 1.55s;
  -webkit-animation-delay: -0.217s;
          animation-delay: -0.217s;
}

.confetti:nth-child(12) .rotate {
     
  -webkit-animation-duration: 1.57s;
          animation-duration: 1.57s;
  -webkit-animation-delay: -1.2874s;
          animation-delay: -1.2874s;
}

.confetti:nth-child(13) .askew {
     
  -webkit-animation-duration: 1.23s;
          animation-duration: 1.23s;
  -webkit-animation-delay: -0.0984s;
          animation-delay: -0.0984s;
}

.confetti:nth-child(13) .rotate {
     
  -webkit-animation-duration: 1.55s;
          animation-duration: 1.55s;
  -webkit-animation-delay: -0.372s;
          animation-delay: -0.372s;
}

.confetti:nth-child(14) .askew {
     
  -webkit-animation-duration: 1.92s;
          animation-duration: 1.92s;
  -webkit-animation-delay: -1.1904s;
          animation-delay: -1.1904s;
}

.confetti:nth-child(14) .rotate {
     
  -webkit-animation-duration: 1.42s;
          animation-duration: 1.42s;
  -webkit-animation-delay: -0.852s;
          animation-delay: -0.852s;
}

.confetti:nth-child(15) .askew {
     
  -webkit-animation-duration: 1.16s;
          animation-duration: 1.16s;
  -webkit-animation-delay: -0.116s;
          animation-delay: -0.116s;
}

.confetti:nth-child(15) .rotate {
     
  -webkit-animation-duration: 1.61s;
          animation-duration: 1.61s;
  -webkit-animation-delay: -0.3542s;
          animation-delay: -0.3542s;
}

.confetti:nth-child(16) .askew {
     
  -webkit-animation-duration: 1.56s;
          animation-duration: 1.56s;
  -webkit-animation-delay: -0.1248s;
          animation-delay: -0.1248s;
}

.confetti:nth-child(16) .rotate {
     
  -webkit-animation-duration: 1.97s;
          animation-duration: 1.97s;
  -webkit-animation-delay: -1.2411s;
          animation-delay: -1.2411s;
}

.confetti:nth-child(17) .askew {
     
  -webkit-animation-duration: 1.73s;
          animation-duration: 1.73s;
  -webkit-animation-delay: -1.4013s;
          animation-delay: -1.4013s;
}

.confetti:nth-child(17) .rotate {
     
  -webkit-animation-duration: 1.91s;
          animation-duration: 1.91s;
  -webkit-animation-delay: -1.91s;
          animation-delay: -1.91s;
}

.confetti:nth-child(18) .askew {
     
  -webkit-animation-duration: 1.91s;
          animation-duration: 1.91s;
  -webkit-animation-delay: -0.8213s;
          animation-delay: -0.8213s;
}

.confetti:nth-child(18) .rotate {
     
  -webkit-animation-duration: 1.85s;
          animation-duration: 1.85s;
  -webkit-animation-delay: -0.555s;
          animation-delay: -0.555s;
}

.confetti:nth-child(19) .askew {
     
  -webkit-animation-duration: 1.66s;
          animation-duration: 1.66s;
  -webkit-animation-delay: -1.2284s;
          animation-delay: -1.2284s;
}

.confetti:nth-child(19) .rotate {
     
  -webkit-animation-duration: 1.43s;
          animation-duration: 1.43s;
  -webkit-animation-delay: -1.3013s;
          animation-delay: -1.3013s;
}

.confetti:nth-child(20) .askew {
     
  -webkit-animation-duration: 1.68s;
          animation-duration: 1.68s;
  -webkit-animation-delay: -0.2016s;
          animation-delay: -0.2016s;
}

.confetti:nth-child(20) .rotate {
     
  -webkit-animation-duration: 1.72s;
          animation-duration: 1.72s;
  -webkit-animation-delay: -0.1892s;
          animation-delay: -0.1892s;
}

.confetti:nth-child(21) .askew {
     
  -webkit-animation-duration: 1.96s;
          animation-duration: 1.96s;
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}

.confetti:nth-child(21) .rotate {
     
  -webkit-animation-duration: 1.01s;
          animation-duration: 1.01s;
  -webkit-animation-delay: -0.1717s;
          animation-delay: -0.1717s;
}

.confetti:nth-child(22) .askew {
     
  -webkit-animation-duration: 1.78s;
          animation-duration: 1.78s;
  -webkit-animation-delay: -1.4774s;
          animation-delay: -1.4774s;
}

.confetti:nth-child(22) .rotate {
     
  -webkit-animation-duration: 1.46s;
          animation-duration: 1.46s;
  -webkit-animation-delay: -1.4308s;
          animation-delay: -1.4308s;
}

.confetti:nth-child(23) .askew {
     
  -webkit-animation-duration: 1.46s;
          animation-duration: 1.46s;
  -webkit-animation-delay: -1.3578s;
          animation-delay: -1.3578s;
}

.confetti:nth-child(23) .rotate {
     
  -webkit-animation-duration: 1.15s;
          animation-duration: 1.15s;
  -webkit-animation-delay: -1.0235s;
          animation-delay: -1.0235s;
}

.confetti:nth-child(24) .askew {
     
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -1.3536s;
          animation-delay: -1.3536s;
}

.confetti:nth-child(24) .rotate {
     
  -webkit-animation-duration: 1.72s;
          animation-duration: 1.72s;
  -webkit-animation-delay: -0.688s;
          animation-delay: -0.688s;
}

.confetti:nth-child(25) .askew {
     
  -webkit-animation-duration: 1.97s;
          animation-duration: 1.97s;
  -webkit-animation-delay: -0.3743s;
          animation-delay: -0.3743s;
}

.confetti:nth-child(25) .rotate {
     
  -webkit-animation-duration: 1.73s;
          animation-duration: 1.73s;
  -webkit-animation-delay: -0.7266s;
          animation-delay: -0.7266s;
}

.confetti:nth-child(26) .askew {
     
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-delay: -0.024s;
          animation-delay: -0.024s;
}

.confetti:nth-child(26) .rotate {
     
  -webkit-animation-duration: 1.57s;
          animation-duration: 1.57s;
  -webkit-animation-delay: -0.1099s;
          animation-delay: -0.1099s;
}

.confetti:nth-child(27) .askew {
     
  -webkit-animation-duration: 1.84s;
          animation-duration: 1.84s;
  -webkit-animation-delay: -1.3064s;
          animation-delay: -1.3064s;
}

.confetti:nth-child(27) .rotate {
     
  -webkit-animation-duration: 1.19s;
          animation-duration: 1.19s;
  -webkit-animation-delay: -0.1666s;
          animation-delay: -0.1666s;
}

.confetti:nth-child(28) .askew {
     
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: -0.088s;
          animation-delay: -0.088s;
}

.confetti:nth-child(28) .rotate {
     
  -webkit-animation-duration: 1.26s;
          animation-duration: 1.26s;
  -webkit-animation-delay: -0.4914s;
          animation-delay: -0.4914s;
}

.confetti:nth-child(29) .askew {
     
  -webkit-animation-duration: 1.51s;
          animation-duration: 1.51s;
  -webkit-animation-delay: -0.6191s;
          animation-delay: -0.6191s;
}

.confetti:nth-child(29) .rotate {
     
  -webkit-animation-duration: 1.89s;
          animation-duration: 1.89s;
  -webkit-animation-delay: -0.0378s;
          animation-delay: -0.0378s;
}

.confetti:nth-child(30) .askew {
     
  -webkit-animation-duration: 1.67s;
          animation-duration: 1.67s;
  -webkit-animation-delay: -1.2525s;
          animation-delay: -1.2525s;
}

.confetti:nth-child(30) .rotate {
     
  -webkit-animation-duration: 1.08s;
          animation-duration: 1.08s;
  -webkit-animation-delay: -0.6048s;
          animation-delay: -0.6048s;
}

.confetti:nth-child(31) .askew {
     
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-delay: -1.104s;
          animation-delay: -1.104s;
}

.confetti:nth-child(31) .rotate {
     
  -webkit-animation-duration: 1.83s;
          animation-duration: 1.83s;
  -webkit-animation-delay: -1.0614s;
          animation-delay: -1.0614s;
}

.confetti:nth-child(32) .askew {
     
  -webkit-animation-duration: 1.96s;
          animation-duration: 1.96s;
  -webkit-animation-delay: -0.7056s;
          animation-delay: -0.7056s;
}

.confetti:nth-child(32) .rotate {
     
  -webkit-animation-duration: 1.15s;
          animation-duration: 1.15s;
  -webkit-animation-delay: -0.0805s;
          animation-delay: -0.0805s;
}

.confetti:nth-child(33) .askew {
     
  -webkit-animation-duration: 1.92s;
          animation-duration: 1.92s;
  -webkit-animation-delay: -0.4992s;
          animation-delay: -0.4992s;
}

.confetti:nth-child(33) .rotate {
     
  -webkit-animation-duration: 1.15s;
          animation-duration: 1.15s;
  -webkit-animation-delay: -0.4945s;
          animation-delay: -0.4945s;
}

.confetti:nth-child(34) .askew {
     
  -webkit-animation-duration: 1.45s;
          animation-duration: 1.45s;
  -webkit-animation-delay: -0.232s;
          animation-delay: -0.232s;
}

.confetti:nth-child(34) .rotate {
     
  -webkit-animation-duration: 1.65s;
          animation-duration: 1.65s;
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}

.confetti:nth-child(35) .askew {
     
  -webkit-animation-duration: 1.53s;
          animation-duration: 1.53s;
  -webkit-animation-delay: -1.53s;
          animation-delay: -1.53s;
}

.confetti:nth-child(35) .rotate {
     
  -webkit-animation-duration: 1.21s;
          animation-duration: 1.21s;
  -webkit-animation-delay: -0.6292s;
          animation-delay: -0.6292s;
}

.confetti:nth-child(36) .askew {
     
  -webkit-animation-duration: 1.03s;
          animation-duration: 1.03s;
  -webkit-animation-delay: -0.3708s;
          animation-delay: -0.3708s;
}

.confetti:nth-child(36) .rotate {
     
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-delay: -0.275s;
          animation-delay: -0.275s;
}

.confetti:nth-child(37) .askew {
     
  -webkit-animation-duration: 1.39s;
          animation-duration: 1.39s;
  -webkit-animation-delay: -0.5699s;
          animation-delay: -0.5699s;
}

.confetti:nth-child(37) .rotate {
     
  -webkit-animation-duration: 1.48s;
          animation-duration: 1.48s;
  -webkit-animation-delay: -1.2876s;
          animation-delay: -1.2876s;
}

.confetti:nth-child(38) .askew {
     
  -webkit-animation-duration: 1.33s;
          animation-duration: 1.33s;
  -webkit-animation-delay: -1.064s;
          animation-delay: -1.064s;
}

.confetti:nth-child(38) .rotate {
     
  -webkit-animation-duration: 1.89s;
          animation-duration: 1.89s;
  -webkit-animation-delay: -1.7388s;
          animation-delay: -1.7388s;
}

.confetti:nth-child(39) .askew {
     
  -webkit-animation-duration: 1.19s;
          animation-duration: 1.19s;
  -webkit-animation-delay: -0.7378s;
          animation-delay