LLaMA 4 Scout

Tiny Single Element Loading Animations
A 0.53T 0.30
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 Recreation</title>
7    <style>
8        /* CSS Styles and Animations */
9        .box {
10            width: 100px;
11            height: 100px;
12            background-color: #007bff;
13            position: relative;
14            animation: moveBox 4s ease-in-out infinite;
15        }
16
17        @keyframes moveBox {
18            0% {
19                transform: translate(0, 0);
20            }
21            50% {
22                transform: translate(200px, 200px) rotate(360deg);
23            }
24            100% {
25                transform: translate(0, 0);
26            }
27        }
28    </style>
29</head>
30<body>
31    <div class="box"></div>
32
33    <script>
34        // JavaScript Interaction
35        const box = document.querySelector('.box');
36
37        box.addEventListener('mouseover', () => {
38            box.style.background = '#17a2b8';
39        });
40
41        box.addEventListener('mouseout', () => {
42            box.style.background = '#007bff';
43        });
44    </script>
45</body>
46</html>