Fiz todo o código da animação, mas somente a primeira animação ocorre. O sino não está chacoalhando
Fiz todo o código da animação, mas somente a primeira animação ocorre. O sino não está chacoalhando
Olá Reberson, tudo bem?
Para que eu possa visualizar melhor o que pode estar ocorrendo e tentar te ajudar, eu preciso que você me envie seu código completo para que eu possa testar.
Fico no aguardo de mais informações, abraços!
O meu também não funcionou, revisei para encontrar algum erro, mas aparentemente está tudo ok. Segue o código:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alura Newsletter</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
azul: {
claro: '#C5DFFF',
escuro: '#061E3C',
hover: '#1057B0'
},
fontFamily: {
inter: ['Inter', 'sans-serif']
},
keyframes: {
sino_kf: {
'0%, 100%': {
transform: 'rotate(-10deg)'
},
'50%': {
transform: 'rotate(10deg)'
}
}
},
animation: {
sino: 'sino_kf 0.31s ease-in-out infinite'
}
}}
}
}
</script>
</head>
<body class="bg-azul-claro font-inter flex justify-center items-center h-screen">
<main class="flex px-6 drop-shadow-2xl lg:w-3/4">
<section class="bg-azul-escuro hidden lg:block w-1/2 rounded-l-lg">
<img class="p-6 m-auto" src="image/icone-mergulhador.svg" alt="icone de mergulhador">
</section>
<section class="bg-white p-10 gap-6 flex flex-col rounded-lg lg:w-1/2 justify-center lg:rounded-l-none">
<div class="self-center relative group">
<svg class="fill-azul-escuro absolute top-0 left-1 opacity-0 group-hover:opacity-100 group-hover:animate-ping"
width="35" height="20" viewBox="0 0 44 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path/>
<path/>
<path/>
<path d="M6.00014 11.0928C5.69804 11.1802 5.49893 11.3671 5.00688 12.0303C3.94497 13.4651 3.16455 15.102 2.62215 17.0463C2.44822 17.6672 2.44822 17.9838 2.62215 18.442C2.72743 18.7223 2.92882 18.9906 3.13022 19.1202C3.63143 19.4427 4.27453 19.2106 4.58349 18.5987C4.67274 18.4209 4.69792 18.3425 4.85583 17.7758C4.97484 17.3537 5.25176 16.6182 5.48062 16.1208C5.8674 15.2768 6.22442 14.692 6.8309 13.9083C7.21997 13.4018 7.2932 13.2662 7.35271 12.9436C7.48316 12.2111 7.24743 11.5208 6.76453 11.2164C6.50134 11.0506 6.27248 11.0144 6.00014 11.0928Z" />
</svg>
<svg class="w-12 h-12 fill-azul-claro stroke-azul-escuro group-hover:animate-sino" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</div>
<div class="text-center"></div>
<form></form>
</section>
</main>
</body>
</html>
Opa, Lucas, tudo bem?
Logo abaixo do fechamento do bloco 'animation', na linha 36, há duas chaves, tira uma dessas chaves e tenta rodar o código de novo ;)
Wow, era isso mesmo. Era a chave de fechamento da tag colors, eu subi ela e deu certo. Valeeeu!
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<title>Alura Newsletter</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
azul: {
claro: '#c5bfff',
escuro: '#061e3c',
hover: '#1057b0'
},
},
fontFamily: {
inter: ['Inter', 'sans-serif']
},
keyframes: {
sino_kf: {
'0%, 100%': {
transform: 'rotate(-10deg)'
},
'50%': {
transform: 'rotate(10deg)'
}
}
},
animation: {
sino: 'sino_kf 0.31s ease-in-out infinite'
}
}
}
}
</script>
</head>
Aqui também não funcionou. (Encontrei o erro, tinha um parênteses fechando no lugar errado!)
Olá pessoal, obrigada pela ajuda!
Reberson o que está ocorrendo é o que o pessoal indicou, um erro de fechamento de chaves.
Na linha 20 está faltando as chaves para fechar o bloco do colors e na linha 37 existe duas chaves que estão duplicadas.
O código corrigido ficará assim:
<script>
tailwind.config = {
theme: {
extend: {
colors: {
azul: {
claro: '#C5DFFF',
escuro: '#061E3C',
hover: '#1057B0'
},
fontFamily: {
inter: ['Inter', 'sans-serif']
},
keyframes: {
sino_kf: {
'0%, 100%': {
transform: 'rotate(-10deg)'
},
'50%': {
transform: 'rotate(10deg)'
}
}
},
animation: {
sino: 'sino_kf 0.31s ease-in-out infinite'
}
}}
}
}
</script>Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar, abraços!