<!DOCTYPE html>
<html>
<!-- <head></head>
<body>
<svg> -->
<!-- <defs> -->
<!-- <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient> 水平渐变-->
<!-- <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient> 垂直渐变-->
<!-- <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:0" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
</body>放射性渐变 -->
<!-- <head>
<style>
.yanse{
fill:red;
}
</style>
</head>
<body>
<svg>
<circle class="yanse" cx="20" cy="20" r="5"/>
<rect class="yanse" x="30" y="30" width="40" height="50"/>
</svg>
</body> -->
<!-- <head>
<style>
.jvxing{
width:100px;
height:100px;
fill:blue;
animation:myfirst 2s ease 2s infinite alternate forwards ;
}
@keyframes myfirst{
0%,100%{fill:blue;}
20%{fill:
width:200px;}
}
</style>
</head>
<body>
<svg>
<rect class="jvxing"/>
</svg>
</body> -->
<!--流光字体-->
<!-- <head>
<style>
body{
background-color:rgb(126,192,238);
}
svg{
background-color:rgb(255,255,0);
}
.zi{
font-size:100px;
fill:rgb(238,130,235);
stroke:black;
stroke-width:2;
stroke-dasharray:2;
}
.text1{
stroke:;
animation:load1 10s infinite linear;
}
.text2{
stroke:;
animation:load2 10s infinite linear;
}
.text3{
stroke:;
animation:load3 10s infinite linear;
}
@keyframes load1{
0%,100%{
stroke-dasharray:255;
}
50%{
stroke-dasharray:80;
}
}
@keyframes load2{
0%,100%{
stroke-dasharray:150;
}
50%{
stroke-dasharray:120;
}
}
@keyframes load3{
0%,100%{
stroke-dasharray:50;
}
50%{
stroke-dasharray:20;
}
}
</style>
</head>
<body>
<svg width="1000px" height="200px">
<text x="150" y="150" class="zi text0">JIA YU TING</text>
<text x="150" y="150" class="zi text1">JIA YU TING</text>
<text x="150" y="150" class="zi text2">JIA YU TING</text>
<text x="150" y="150" class="zi text3">JIA YU TING</text>
</svg>
</body> -->
<!--加载动画-->
<head>
<style>
.load{
stroke-width:20;
fill:none;
stroke-dasharray:252;
stroke-dashoffset:0;
animation:load 1.5s ease-in-out infinite;
transform-origin:center center;
}
.one{
stroke:red;
}
.two{
stroke:yellow;
animation-delay:0.1s;
}
.tree{
stroke:skyblue;
animation-delay:0.2s;
}
.point{
animation:jump 1.5s ease-in-out infinite;
}
.point1{
fill:red;
}
.point2{
fill:yellow;
animation-delay:0.2s;
}
.point3{
fill:skyblue;
animation-delay:0.4s;
}
@keyframes load{
0%,100%{
stroke-dashoffset:252;
}
50%{
stroke-dashoffset:230;
}
100%{
transform:rotate(360deg);
}
}
@keyframes jump{
0%,100%{
stroke-dashoffset:252;
}
50%{
transform:translatey(-10px);
}
}
</style>
</head>
<body>
<svg viewBox="0 0 120 120">
<circle class="load one" cx="60" cy="60" r="40"/>
<circle class="load two" cx="60" cy="60" r="40"/>
<circle class="load tree" cx="60" cy="60" r="40"/>
<circle class="point point1" cx="45" cy="60" r="5" />
<circle class="point point2" cx="60" cy="60" r="5" />
<circle class="point point3" cx="75" cy="60" r="5" />
</svg>
</body>
</html>