CSS 3D三角彩色锥形旋转动画效果

 
 
    <template>
    <view class="pyramid-loader">
      <view class="wrapper">
        <span class="side side1"></span>  <!-- 金字塔的一个面 -->
        <span class="side side2"></span>  <!-- 金字塔的一个面 -->
        <span class="side side3"></span>  <!-- 金字塔的一个面 -->
        <span class="side side4"></span>  <!-- 金字塔的一个面 -->
        <span class="shadow"></span>  <!-- 金字塔的阴影 -->
      </view>  
    </view>
    </template>
 
    <script>
 
    </script>
 
    <style>
    	body {
    		background-color: #212121;  /* 设置背景颜色 */
    	}
 
    	.pyramid-loader {
    	  position: relative;  /* 设置相对定位 */
    	  width: 300px;  /* 设置宽度 */
    	  height: