1.HTML内直接嵌入SVG
2.SVG的图形内直接加style
stroke 边框颜色;fill 形状颜色;stroke-width 边框宽度;stroke-opacity 边框透明度;
3.CSS3动画animation属性设置
代码如下:
<html>
<head>
<style>
@keyframes morph {
0% {
stroke-width: 10;
stroke-opacity: 0.1;
}
25% {
stroke-width: 30;
stroke-opacity: 0.3;
}
50% {
stroke-width: 10;
stroke-opacity: 0.5;
}
75% {
stroke-width: 10;
stroke-opacity: 0.3;
}
100% {
stroke-width: 10;
stroke-opacity: 0.0;
}
}
.loading-circle-1 {
-webkit-animation: morph 2s ease infinite;
animation: morph 2s ease infinite;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle class="loading-circle-1" cx="100" cy="50" r="10" stroke="red" fill="red" />
</svg>
</body>