model output
Qwen3-VL-8B-Instruct

Only CSS: Joint Animation
A 0.63T 0.25
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Robot Arm Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    background: white;
14    margin: 0;
15  }
16
17  .arm {
18    position: relative;
19    width: 0;
20    height: 0;
21    transform-origin: center;
22    animation: armRotate 1s ease-in-out forwards;
23  }
24
25  .arm-segment {
26    position: absolute;
27    width: 100px;
28    height: 20px;
29    background: #7fb3e6;
30    border-radius: 5px;
31    display: flex;
32    justify-content: center;
33    align-items: center;
34    color: white;
35    font-weight: bold;
36    z-index: 10;
37  }
38
39  .arm-segment:nth-child(1) {
40    top: 0;
41    left: 50%;
42    transform: translateX(-50%) rotate(0deg);
43    background: #888;
44  }
45
46  .arm-segment:nth-child(2) {
47    top: 50%;
48    left: 50%;
49    transform: translateX(-50%) rotate(0deg);
50    background: #7fb3e6;
51  }
52
53  .arm-segment:nth-child(3) {
54    top: 50%;
55    left: 50%;
56    transform: translateX(-50%) rotate(0deg);
57    background: #7fb3e6;
58  }
59
60  .joint {
61    position: absolute;
62    width: 10px;
63    height: 10px;
64    background: #ffcc00;
65    border-radius: 50%;
66    z-index: 20;
67  }
68
69  .joint:nth-child(1) {
70    top: 50%;
71    left: 50%;
72    transform: translate(-50%, -50%);
73  }
74
75  .joint:nth-child(2) {
76    top: 50%;
77    left: 50%;
78    transform: translate(-50%, -50%);
79  }
80
81  .joint:nth-child(3) {
82    top: 50%;
83    left: 50%;
84    transform: translate(-50%, -50%);
85  }
86
87  @keyframes armRotate {
88    0% {
89      transform: rotate(0deg);
90    }
91    100% {
92      transform: rotate(-90deg);
93    }
94  }
95</style>
96</head>
97<body>
98  <div class="arm">
99    <div class="arm-segment"></div>
100    <div class="arm-segment"></div>
101    <div class="arm-segment"></div>
102    <div class="joint"></div>
103    <div class="joint"></div>
104    <div class="joint"></div>
105  </div>
106</body>
107</html>