三角形分割合成loading加载动画

代码语言:html

所属分类:加载滚动

代码描述:三角形分割合成loading加载动画

代码标签: loading 加载 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
  background-color: black;
  display: flex;
  height: 100%;
  width: 100%;
}

body {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

#loading {
  clip-path: polygon(0% 0%, 0% 100%, 42.3% 100%, 42.3% 71.8%, 49.85% 56.2%, 57.7% 71.8%, 30.6% 71.8%, 27% 100%, 100% 100%, 100% 0%);
  height: 100px;
  position: relative;
  transform-origin: 50% 66.66%;
  width: 100px;
}

svg {
  display: block;
}

g {
  position: relative;
}

.triangle {
  fill: #F8D872;
  stroke: #F8D872;
}

#triangle, #triangle-2 {
  height: 100%;
  transform-origin: 50% 66.66%;
  width: 100%;
}

#triangle {
  left: 0;
  position: absolute;
  top: 0;
}

.fill {
  fill: black;
  stroke: black;
}

#fill-1-1, #fill-1-2 {
  transform-origin: 22.5px 209.1px;
}
#fill-2-1, #fill-2-2 {
  transform-origin: 67.6px 209.1px;
}
#fill-3-1, #fill-3-2 {
  transform-origin: 45.07px 199.1px;
}
#fill-4-1, #fill-4-2 {
  transform-origin: 90.7px 199.1px;
}
#fill-5-1, #fill-5-2 {
  transform-origin: 112.6px 209.1px;
}
#fill-6-1, #fill-6-2 {
  transform-origin: 135.07px 199.1px;
}
#fill-7-1, #fill-7-2 {
  transform-origin: 45.07px 165.1px;
}
#fill-8-1, #fill-8-2 {
  transform-origin: 157.6px 209.1px;
}
#fill-9-1, #fill-9-2 {
  transform-origin: 180.07px 199.1px;
}
#fill-10-1, #fill-10-2 {
  transform-origin: 202.6px 209.1px;
}
#fill-11-1, #fill-11-2 {
  transform-origin: 67.6px 155.1px;
}
#fill-12-1, #fill-12-2 {
  transform-origin: 180.07px 165.1px;
}
#fill-13-1, #fill-13-2 {
  transform-origin: 67.6px 122.1px;
}
#fill-14-1, #fill-14-2 {
  transform-origin: 157.6px 155.1px;
}
#fill-15-1, #fill-15-2 {
  transform-origin: 157.6px 122.1px;
}
#fill-16-1-1, #fill-16-1-2 {
  transform-origin: 90.07px 108.1px;
}
#fill-16-2-1, #fill-16-2-2 {
  transform-origin: 135.07px 108.1px;
}
#fill-17-1, #fill-17-2 {
  transform-origin: 135.07px 76.1px;
}
#fill-18-1, #fill-18-2 {
  transform-origin: 90.07px 76.1px;
}
#fill-19-1, #fill-19-2 {
  transform-origin: 112.6px 62.1px;
}
#fill-20-1, #fill-20-2 {
  transform-origin: 112.6px 30.1px;
}
</style>

</head>
<body translate="no">
<div class="loading" id="loading">
<svg id="triangle" viewBox="0 0 226 226" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g class="group--1">
<path class="triangle" id="triangle-1-1" d=" M 22.5 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-1-1" d=" M 22.5 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--3">
<path class="triangle" id="triangle-3-1" d=" M 45.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-3-1" d=" M 45.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--2">
<path class="triangle" id="triangle-2-1" d=" M 67.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-2-1" d=" M 67.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--4">
<path class="triangle" id="triangle-4-1" d=" M 90.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-4-1" d=" M 90.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--5">
<path class="triangle" id="triangle-5-1" d=" M 112.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-5-1" d=" M 112.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--6">
<path class="triangle" id="triangle-6-1" d=" M 135.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-6-1" d=" M 135.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--7">
<path class="triangle" id="triangle-7-1" d=" 
               M 45.07 135.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-7-1" d=" 
               M 45.07 135.1
               l 22.5 45
               h -45
               z" />
</g>
<g class="group--8">
<path class="triangle" id="triangle-8-1" d=" M 157.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-8-1" d=" M 157.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--9">
<path class="triangle" id="triangle-9-1" d=" M 180.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-9-1" d=" M 180.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--10">
<path class="triangle" id="triangle-10-1" d=" M 202.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-10-1" d=" M 202.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--11">
<path class="triangle" id="triangle-11-1" d=" M 67.6 180.099
               l 22.5 -45
               h -45
               z" />
<path class="fill" id="fill-11-1" d=" M 67.6 180.099
               l 22.5 -45
               h -45
               z" />
</g>
<g class="group--12">
<path class="triangle" id="triangle-12-1" d=" M 180.07 135.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-12-1" d=" M 180.07 135.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--13">
<path class="triangle" id="triangle-13-1" d=" M 67.6 90.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-13-1" d=" M 67.6 90.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--14">
<path class="triangle" id="triangle-14-1" d=" M 157.6 180.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-14-1" d=" M 157.6 180.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--15">
<path class="triangle" id="triangle-15-1" d=" M 157.6 90.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-15-1" d=" M 157.6 90.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--16 group--16-1" id="group-16-1">
<path class="triangle" id="triangle-16-1-1" d=" M 90.07 135.099
               l 22.5 -45
               h -45
               z" />
<path class="fill fill--16" id="fill-16-1-1" d=" M 90.07 135.099
               l 22.5 -45
               h -45
               z" />
</g>
<g class="group--16 group--16-2" id="group-16-2">
<path class="triangle" id="triangle-16-2-1" d=" 
               M 135.07 135.099
               l -22.5 -45
               h 45
               z" />
<path class="fill fill--16" id="fill-16-2-1" d=" 
               M 135.07 135.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--17">
<path class="triangle" id="triangle-17-1" d=" M 135.07 45
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-17-1" d=" M 135.07 45
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--18">
<path class="triangle" id="triangle-18-1" d=" M 90.07 45
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-18-1" d=" M 90.07 45
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--19">
<path class="triangle" id="triangle-19-1" d=" M 135.07 45
               h -45
               l 22.5 45
               z " />
<path class="fill" id="fill-19-1" d=" M 135.07 45
               h -45
               l 22.5 45
               z " />
</g>
<g class="group--20">
<path class="triangle" id="triangle-20-1" d=" M 112.6.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-20-1" d=" M 112.6.1
               l 22.5 45
               h -45
               z " />
</g>
</svg>
<svg id="triangle-2" viewBox="0 0 226 226" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g class="group--1">
<path class="triangle" id="triangle-1-2" d=" M 22.5 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-1-2" d=" M 22.5 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--3">
<path class="triangle" id="triangle-3-2" d=" M 45.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-3-2" d=" M 45.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--2">
<path class="triangle" id="triangle-2-2" d=" M 67.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-2-2" d=" M 67.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
 <g class="group--4">
<path class="triangle" id="triangle-4-2" d=" M 90.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-4-2" d=" M 90.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--5">
<path class="triangle" id="triangle-5-2" d=" M 112.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-5-2" d=" M 112.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--6">
<path class="triangle" id="triangle-6-2" d=" M 135.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-6-2" d=" M 135.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--7">
<path class="triangle" id="triangle-7-2" d=" 
               M 45.07 135.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-7-2" d=" 
               M 45.07 135.1
               l 22.5 45
               h -45
               z" />
</g>
<g class="group--8">
<path class="triangle" id="triangle-8-2" d=" M 157.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-8-2" d=" M 157.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--9">
<path class="triangle" id="triangle-9-2" d=" M 180.07 225.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-9-2" d=" M 180.07 225.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--10">
<path class="triangle" id="triangle-10-2" d=" M 202.6 180.1
               l -22.5 45
               h 45
               z" />
<path class="fill" id="fill-10-2" d=" M 202.6 180.1
               l -22.5 45
               h 45
               z" />
</g>
<g class="group--11">
<path class="triangle" id="triangle-11-2" d=" M 67.6 180.099
               l 22.5 -45
               h -45
               z" />
<path class="fill" id="fill-11-2" d=" M 67.6 180.099
               l 22.5 -45
               h -45
               z" />
</g>
<g class="group--12">
<path class="triangle" id="triangle-12-2" d=" M 180.07 135.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-12-2" d=" M 180.07 135.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--13">
<path class="triangle" id="triangle-13-2" d=" M 67.6 90.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-13-2" d=" M 67.6 90.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--14">
<path class="triangle" id="triangle-14-2" d=" M 157.6 180.099
               l -22.5 -45
               h 45
               z" />
<path class="fill" id="fill-14-2" d=" M 157.6 180.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--15">
<path class="triangle" id="triangle-15-2" d=" M 157.6 90.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-15-2" d=" M 157.6 90.1
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--16 group--16-1" id="group-16-1-2">
<path class="triangle" id="triangle-16-1-2" d=" M 90.07 135.099
               l 22.5 -45
               h -45
               z" />
<path class="fill fill--16" id="fill-16-1-2" d=" M 90.07 135.099
               l 22.5 -45
               h -45
               z" />
</g>
<g class="group--16 group--16-2" id="group-16-2-2">
<path class="triangle" id="triangle-16-2-2" d=" 
               M 135.07 135.099
               l -22.5 -45
               h 45
               z" />
<path class="fill fill--16" id="fill-16-2-2" d=" 
               M 135.07 135.099
               l -22.5 -45
               h 45
               z" />
</g>
<g class="group--17">
<path class="triangle" id="triangle-17-2" d=" M 135.07 45
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-17-2" d=" M 135.07 45
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--18">
<path class="triangle" id="triangle-18-2" d=" M 90.07 45
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-18-2" d=" M 90.07 45
               l 22.5 45
               h -45
               z " />
</g>
<g class="group--19">
<path class="triangle" id="triangle-19-2" d=" M 135.07 45
               h -45
               l 22.5 45
               z " />
<path class="fill" id="fill-19-2" d=" M 135.07 45
               h -45
               l 22.5 45
               z " />
</g>
<g class="group--20">
<path class="triangle" id="triangle-20-2" d=" M 112.6.1
               l 22.5 45
               h -45
               z " />
<path class="fill" id="fill-20-2" d=" M 112.6.1
               l 22.5 45
               h -45
               z " />
</g>
</svg>
</div>

<script >
const durationFraction = 0.5;
const duration = 92 / 30 * 1000;
const durationRotate = 288 / 30 * 1000;
const insetDelay = 0.50;
const offset = 12 / 96;
const offsetScale = 30 / 96;

document.querySelector('#loading').animate([
{ transform: 'rotate(0)' },
{ transform: 'rotate(360deg)' }],
{
  duration: durationRotate,
  iterations: Infinity });


document.querySelector('#triangle').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0.4)' },
{ transform: 'scale(0.16)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-2').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0.4)' },
{ transform: 'scale(0.16)' }],
{
  duration: duration,
  iterations: Infinity });



document.querySelector('#triangle-1-1').animate([
{ opacity: '0' },
{ opacity: '1', offset: offset },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-1-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0)', offset: offsetScale },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-2-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 1 / 19 * durationFraction },
{ opacity: '1', offset: offset + 1 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-2-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 1 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 1 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-3-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 2 / 19 * durationFraction },
{ opacity: '1', offset: offset + 2 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-3-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 2 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 2 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-4-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 3 / 19 * durationFraction },
{ opacity: '1', offset: offset + 3 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-4-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 3 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 3 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-5-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 4 / 19 * durationFraction },
{ opacity: '1', offset: offset + 4 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-5-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 4 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 4 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-6-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 5 / 19 * durationFraction },
{ opacity: '1', offset: offset + 5 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#fill-6-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 5 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 5 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetDelay });


document.querySelector('#triangle-7-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 6 / 19 * durationFraction },
{ opacity: '1', offset: offset + 6 / 19 * durationFraction },
{ opacity: '1' }],
{
  duration: duration,
  iterations: Infinity,
  iterationStart: insetD.........完整代码请登录后点击上方下载按钮下载查看

网友评论0