model output
LLaMA 4 Scout

CSS Direction Animation
A 0.84T 0.55
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>Animation</title>
7    <style>
8        .star {
9            position: relative;
10            top: 50px;
11            left: 50%;
12            transform: translateX(-50%);
13            width: 200px;
14            height: 200px;
15            animation: rotate 8s linear infinite;
16        }
17
18        @keyframes rotate {
19            0% {
20                transform: translateX(-50%) rotate(0deg);
21            }
22            100% {
23                transform: translateX(-50%) rotate(360deg);
24            }
25        }
26
27        .polygon {
28            position: absolute;
29            width: 0;
30            height: 0;
31            border-style: solid;
32            opacity: 0.5;
33        }
34
35        .polygon:nth-child(1) {
36            border-width: 0 100px 150px 100px;
37            border-color: transparent transparent #ff0000 transparent;
38            transform: rotate(0deg);
39        }
40
41        .polygon:nth-child(2) {
42            border-width: 0 100px 150px 100px;
43            border-color: transparent transparent #ffa500 transparent;
44            transform: rotate(36deg);
45        }
46
47        .polygon:nth-child(3) {
48            border-width: 0 100px 150px 100px;
49            border-color: transparent transparent #ffff00 transparent;
50            transform: rotate(72deg);
51        }
52
53        .polygon:nth-child(4) {
54            border-width: 0 100px 150px 100px;
55            border-color: transparent transparent #008000 transparent;
56            transform: rotate(108deg);
57        }
58
59        .polygon:nth-child(5) {
60            border-width: 0 100px 150px 100px;
61            border-color: transparent transparent #0000ff transparent;
62            transform: rotate(144deg);
63        }
64
65        .polygon:nth-child(6) {
66            border-width: 0 100px 150px 100px;
67            border-color: transparent transparent #4b0082 transparent;
68            transform: rotate(180deg);
69        }
70
71        .polygon:nth-child(7) {
72            border-width: 0 100px 150px 100px;
73            border-color: transparent transparent #ee82ee transparent;
74            transform: rotate(216deg);
75        }
76
77        .polygon:nth-child(8) {
78            border-width: 0 100px 150px 100px;
79            border-color: transparent transparent #800080 transparent;
80            transform: rotate(252deg);
81        }
82    </style>
83</head>
84<body>
85    <div class="star">
86        <div class="polygon"></div>
87        <div class="polygon"></div>
88        <div class="polygon"></div>
89        <div class="polygon"></div>
90        <div class="polygon"></div>
91        <div class="polygon"></div>
92        <div class="polygon"></div>
93        <div class="polygon"></div>
94    </div>
95</body>
96</html>