svg--动画-进度条

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        border: 1px solid rgb(15, 15, 15);
        width: 200px;
        height: 200px;
    }
</style>
 
<body>
    <!-- svg动画 -->
    <!--
transform变换
  translate位移
  rotate旋转
  skewX和skewY斜切
  scale缩放
  matrix复杂变形
 -->
    <div class="container">
        <svg width="200" height="200" viewBox="0 0 200 200">
      <!-- xy各偏移 -->
      <!-- 旋转 顺时针-->
      <rect x="0" y="0" width="100" height="50" fill="red" transform="translate(10, 10) rotate(30)"></rect>
    </svg>
    </div>
    <!-- 环形进度条-->
    <div class="container">
        <svg width="200" height="200">
        <circle cx="100" cy="100" r="90" stroke-width="10" stroke="#d1d3d7" fill="none"></circle>
        <circle class="circle" cx="100" cy="100" r="90" stroke-width="10" stroke="#00a5e0" fill="none"></circle>
      </svg>
    </div>
</body>
<style>
    .circle {
        /* 周长 = 2 * 3.1415926 * r 100 */
        /* stroke-dasharray: 105 615; */
        animation: circle 5s linear infinite;
    }
    /* 补间动画：开始和结束状态 */
     
    @keyframes circle {
        from {
            stroke-dasharray: 0 615;
        }
        to {
            stroke-dasharray: 615 615;
        }
    }
</style>
 
</html>

　　

posted @   小白咚  阅读(212)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
历史上的今天：
2019-10-12 Vue-- 页面跳转总结
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛