44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
---
|
|
name: media/animated-illustration
|
|
title: Animated Illustrations & Icons
|
|
description: Lottie animations, CSS illustrations, motion graphics.
|
|
tags: [media, animation, illustration, lottie, motion]
|
|
source: raycast.com, linear.app, amppz.com, brad.co
|
|
---
|
|
|
|
# Animated Illustrations
|
|
|
|
## 1. Lottie Integration
|
|
|
|
```html
|
|
<div id="animation" data-src="animation.json"></div>
|
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
|
<script>
|
|
document.getElementById('animation').innerHTML = `
|
|
<lottie-player src="animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
|
|
`;
|
|
</script>
|
|
```
|
|
|
|
## 2. CSS Animated Illustration
|
|
|
|
```css
|
|
.illustration {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);
|
|
border-radius: 50%;
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
```
|
|
|
|
## Anti-patterns
|
|
|
|
| ❌ Плохо | ✅ Хорошо |
|
|
|----------|-----------|
|
|
| Без fallback | SVG fallback |
|
|
| Без `prefers-reduced-motion` | Уважать настройки |
|