Estoy usando un código de Codepen para crear una animación en Loop al borde de un texto, todo está hecho en CSS, pero cuando lo trato de hacer en mi computadora, no funciona, también lo he probado en mi página y nada, alguien me puede ayudar a ver porque no me sale cuando lo pruebo?
Este es el código: https://codepen.io/jvera/pen/gXxgXx
Yo he creado los 2 archivos (html y CSS) y los he puesto en una carpeta, cuando abro el html, no me sale nada, sale todo en blanco (ni el título en html).
Quizás sea la extensión? al estilo le he puesto .css pero en la descripción del código dice que es SASS y nose si usa otro tipo de extensión?
Gracias.
Actualización: Ya me aparece el texto, pero sin el efecto.
{
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
vertical-align: middle;
}
.draw {
overflow: hidden;
position: relative;
}
.draw::before, .draw::after {
content: '';
box-sizing: border-box;
position: absolute;
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
border-top-color: #60daaa;
border-right-color: #60daaa;
animation: border 2s infinite;
}
.draw::after {
bottom: 0;
right: 0;
animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}
@keyframes border {
0% {
width: 0;
height: 0;
}
25% {
width: 100%;
height: 0;
}
50% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@keyframes borderColor {
0% {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
50% {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
51% {
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
border-bottom-color: transparent;
border-left-color: transparent;
}
}
<center><h2 class="draw">Titulo</h2><center>