如何使用Html SVG标签、CSS来实现元素加载动画本文将告诉你如何使用SVG、CSS来实现Html网页上的元素加载动

本文将告诉你如何使用SVG、CSS来实现Html网页上的元素加载动画。

1.使用Html的SVG，CSS来实现元素加载动画示例

这个HTML文件的名字是svg_element_loading_animation_example.html。

下面是该html文件的源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Use SVG, CSS To Impelment Element Loading Example</title>
<style>
/* define the svg box css style.*/
.box {
    height: 200px;
    width: 200px;
    background: white;
}
/* define the svg box and circle css style.*/
.box .circle {
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}


/* rotate animation */
@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}
/* arc animation */
/* 125 is the circumference of the circle */
@keyframes circle {
    0% {
 /* state 1: point */
        stroke-dasharray: 1 125;
        stroke-dashoffset: 0;
    }
    50% {
 /* state 2: circle */
        stroke-dasharray: 120, 125;
        stroke-dashoffset: 0;
    }
    to {
 /* state 3: point（shrink in the direction of rotation） */
        stroke-dasharray: 120 125;
        stroke-dashoffset: -125px;
    }
}

/* define the css box class animation */
.box {
  /* ...rotate animation */
  animation: rotate 2s linear infinite;
}

/* define the css circle class animation */
.circle {
  /* ...circle animation */
  animation: circle 2s infinite;
}


</style>
</head>
<body>

<!-- Use svg tag to define a box area.  -->
<svg viewBox="25 25 50 50" class="box">
    <!-- draw a svg circle -->
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>


</body>
</html>