【css+js】h5+c3+js实现彩虹三角加载动画_大屏三角动态图js-CSDN博客

本文链接：https://blog.csdn.net/weixin_42582523/article/details/122135954

这篇博客展示了如何使用HTML和CSS创建一个动态的加载效果。通过定义关键帧动画，创建了多个三角形元素，每个元素有不同的颜色和动画延迟，形成连续的闪烁和缩放效果。同时，加载文字也进行了淡入淡出的动画处理，增加了视觉吸引力。

摘要由CSDN通过智能技术生成

html:

<div class="triangle-wrapper">
	<div class="triangle triangle-1"></div>
	<div class="triangle triangle-2"></div>
	<div class="triangle triangle-3"></div>
	<div class="triangle triangle-4"></div>
	<div class="triangle triangle-5"></div>
	<p class="triangle-loading">Loading</p>
</div>

css:

html {
			  height: 100%;
			}
			body {
			  align-items: center;
			  background: #000;
			  display: flex;
			  height: 100%;
			  justify-content: center;
			}
			@keyframes grow-and-fade {
			  0% {
			    opacity: 0;
			    transform: scale(0.1) translatez(0);
			  }
			  40% {
			    opacity: 1;
			  }
			  60% {
			    opacity: 1;
			  }
			  100% {
			    opacity: 0;
			    transform: scale(1) translatez(0);
			  }
			}
			@keyframes pulsing-fade {
			  0% {
			    opacity: 0;
			  }
			  20% {
			    opacity: 0;
			  }
			  40% {
			    opacity: 0.8;
			  }
			  60% {
			    opacity: 0;
			  }
			}
			.triangle {
			  animation: grow-and-fade 2000ms linear infinite;
			  height: 150px;
			  left: 0;
			  opacity: 0;
			  width: 150px;
			  position: absolute;
			  top: 0%;
			  transform: translatez(0);
			  transform-origin: 50% 60%;
			  will-change: opacity, transform;
			}
			.triangle-wrapper {
			  height: 150px;
			  position: relative;
			  width: 150px;
			}
			.triangle-loading {
			  animation: pulsing-fade 6000ms ease infinite;
			  color: white;
			  font-family: 'Helvetica Neue', Helvetica, sans-serif;
			  font-size: 12px;
			  font-weight: 300;
			  left: 50%;
			  letter-spacing: 8px;
			  margin-left: 4px;
			  margin-top: 10px;
			  opacity: 0;
			  position: absolute;
			  top: 100%;
			  transform: translate3d(-50%, -50%, 0);
			  text-transform: uppercase;
			}
			.triangle-svg {
			  margin-top: -20px;
			  opacity: 0.5;
			  overflow: visible;
			}
			.triangle-polygon {
			  stroke-width: 5px;
			}
			.triangle-1 {
			  animation-delay: 0ms;
			}
			.triangle-1 .triangle-polygon {
			  stroke: hotpink;
			}
			.triangle-2 {
			  animation-delay: 400ms;
			}
			.triangle-2 .triangle-polygon {
			  stroke: aqua;
			}
			.triangle-3 {
			  animation-delay: 800ms;
			}
			.triangle-3 .triangle-polygon {
			  stroke: cornflowerblue;
			}
			.triangle-4 {
			  animation-delay: 1200ms;
			}
			.triangle-4 .triangle-polygon {
			  stroke: yellow;
			}
			.triangle-5 {
			  animation-delay: 1600ms;
			}
			.triangle-5 .triangle-polygon {
			  stroke: white;
			}

js:

(() => {
		  const $triangles = document.querySelectorAll('.triangle');
		  const template = `<svg class="triangle-svg" viewBox="0 0 140 141">
		    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
		    </g>
		  </svg>`;
		
		  Array.prototype.forEach.call($triangles, ($triangle, index) => {
		    $triangle.innerHTML = template;
		  });
		})();