En este artículo, aprenderemos cómo definir que el color del borde inferior sea animable en CSS.
Enfoque: el color del borde inferior es el color del borde inferior y queremos animar su color. Para hacer eso, usaremos la propiedad de animación del CSS. que toma tres valores
- El primero es el nombre de la animación, que es un nombre de fotograma clave con el que queremos enlazar.
Sintaxis:
@keyframe myFun{
100%{
border-bottom-color: red;
}
}
- El segundo es el tiempo por el que anima.
- Y el último es el número de veces que queremos animar.
Sintaxis:
animation: animation_name animation_duration animation_count
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.gfg{
width: 300px;
height: 200px;
border: solid 15px green;
color: green;
font-size: 30px;
margin-left: 20%;
animation: myFun 3s infinite;
}
@keyframes myFun {
100%{
border-bottom-color: red;
}
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kapilnama1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA