WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação da linha de batimentos cardíacos
2646
Andev.web
Abrir no Editor
Video
Publique Seu Código
4
Recomendado
23 November 2024
Página de destino - EcoCataIyst
12 October 2025
Modelo de interface do usuário do Facebook - Exemplo em HTML
15 January 2026
Navegando pelas profundezas da Web: Jogo de RPG - HTML5, JavaScript
HTML
Copy
Andev Web
CSS
Copy
body { height: 100vh; display: flex; justify-content: center; align-items: center; } svg { overflow: visible; } svg path#line { fill: none; stroke: #e00000; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray:none; stroke-opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 4s linear infinite; } svg path#heart { transform-origin: 50% 50%; animation: blink 4s linear infinite; } @keyframes dash { 0% { stroke-dashoffset: 1; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes blink { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.2); } 75% { opacity: 1; transform: scale(1.0); } 80% { opacity: 1; transform: scale(1.2); } 85% { opacity: 1; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } }
JS
Copy