CSS - No toma efectos este dibujo animado

 
Vista:
Imágen de perfil de cesar
Val: 44
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

No toma efectos este dibujo animado

Publicado por cesar (23 intervenciones) el 04/09/2019 00:07:25
Buenas tardes a todos mi problema hoy es este dibujo el cual no toma ningun efecto
debo subrayar el texto con la animacion hover pero no lo toma ni el background ni nada que deberia modificar para que los tome ?? o que esta malo alli???
Aprecio su ayuda

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
 
<style>
 
body {
  font-size: 1.2;
  margin: 1em;
 
 
    }
 
h1{display: table;
}
 
.h1::after{
content: '' ;
display: block;
height: 3px;
background: red;
width: 0;
transform: scale(0,1);
transform-origin: center left;
transition: transform .25s;
 
}
 
 
h1:hover::after{
transform: scale(1,1);
 
}
</style>
 
</head>
<body>
  <h1>  Tu futuro te esta esperando, estudia en EDteam</h1>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

No toma efectos este dibujo animado

Publicado por joel (252 intervenciones) el 04/09/2019 08:01:38
Hola Cesar, el problema lo tienes en el nombre del estilo, no es .h1, es h1 sin el punto.
El otro problema que veo, es el width... no deberias ponerlo...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
 
<style>
 
body {
    font-size: 1.2;
    margin: 1em;
}
 
h1{
    display: inline-block;
}
 
h1::after{
    content:"";
    display: block;
    height: 3px;
    background: red;
    transform: scale(0,0);
    transform-origin: center left;
    transition: transform .25s;
}
 
h1:hover::after{
    transform: scale(1,1);
}
</style>
 
</head>
<body>
    <h1>Tu futuro te esta esperando, estudia en EDteam</h1>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de cesar
Val: 44
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

No toma efectos este dibujo animado

Publicado por cesar (23 intervenciones) el 04/09/2019 15:29:10
Gracias Joel un verdadero experto en el tema Css funciono perfecto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar