|
|
<!-- 预加载动画的最外层容器 -->
|
|
|
<div class="preloading-animate">
|
|
|
<!-- 预加载的包装容器 -->
|
|
|
<div class="preloading-wrapper">
|
|
|
<!-- 使用SVG创建预加载动画，设置视口和比例 -->
|
|
|
<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
|
|
<!-- 定义第一个圆形，设置初始位置、半径和填充颜色 -->
|
|
|
<circle cx="67.802" cy="59.907" r="6" fill="#51CACC">
|
|
|
<!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
|
|
|
<animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
</circle>
|
|
|
<!-- 定义第二个圆形，设置初始位置、半径和填充颜色 -->
|
|
|
<circle cx="46.079" cy="69.992" r="6" fill="#9DF871">
|
|
|
<!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
|
|
|
<animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
</circle>
|
|
|
<!-- 定义第三个圆形，设置初始位置、半径和填充颜色 -->
|
|
|
<circle cx="29.775" cy="52.449" r="6" fill="#E0FF77">
|
|
|
<!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
|
|
|
<animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
</circle>
|
|
|
<!-- 定义第四个圆形，设置初始位置、半径和填充颜色 -->
|
|
|
<circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6">
|
|
|
<!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
|
|
|
<animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
</circle>
|
|
|
<!-- 定义第五个圆形，设置初始位置、半径和填充颜色 -->
|
|
|
<circle cx="64.923" cy="36.13" r="6" fill="#FF708E">
|
|
|
<!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
|
|
|
<animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
<animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
|
|
|
</circle>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
