Glowing 3D Notification
Tooltips · @Sameer2244
- No JS
- Reduced-motion ready
Spinning Bouncing Notification
A pure-CSS notification with spin, SVG and bounce effects, animating only GPU-friendly properties. Created by devsleonardo on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- 701 B gzip
Created by @devsleonardo on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Spinning Bouncing Notification" by devsleonardo on Uiverse.io · MIT License · https://uiverse.io/devsleonardo/red-goat-27 -->
<div class="notification">
<svg viewBox="0 0 100 100" class="trophy">
<g>
<path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
<path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
<path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
<path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
<path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
<path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
</g>
</svg>
<p>Congratulations!
</p><p>You reached level 10!</p>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Glowing Spinning Notification
Tooltips · @ahmed150up
- No JS
- Reduced-motion ready
Gradient Spinning Notification
Tooltips · @yaroslavas2001
- No JS
- Reduced-motion ready
Gradient 3D Notification
Tooltips · @John-CFO
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Fading Notification
Tooltips · @jyefu013
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Notification
Tooltips · @andrew-demchenk0
- GPU-friendly
- No JS
- Reduced-motion ready