Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo incluir el efecto de desplazamiento mediante el kit de herramientas Tachyons.
Hover: este efecto se usa para decir qué hará ese botón si hace clic en esa imagen. También se utiliza para dar una posibilidad visual al usuario con el que se puede interactuar con un elemento.
Taquiones Tematización Clases flotantes:
- dim: esta clase se usa para cambiar la opacidad al pasar el mouse.
- resplandor: esta clase hará que un elemento brille cada vez que el usuario se desplace sobre él.
- hide-child: esta clase hará que un elemento muestre su contenido secundario al pasar el mouse.
- underline-hover: esta clase hará que un elemento subraye el texto al pasar el mouse.
- crecer: esta clase hará que un elemento se escale al 1,05% de su tamaño normal al pasar el mouse.
- puntero: esta clase se usa para agregar un puntero a un elemento, lo que significa que al pasar el mouse por encima, el contenido se desvanecerá en consecuencia.
- shadow-hover: esta clase hará que un elemento muestre una sombra al pasar el mouse.
- bg-animate: esta clase hará que un elemento se anime al pasar el mouse.
Sintaxis:
<element class="class-name">...</element>
Ejemplo 1: en este ejemplo, hemos utilizado la clase de crecimiento para escalar al 1,05 % de su tamaño normal al pasar el mouse sobre ella.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body class="contain">
<h2 style="color:green;">
GeeksforGeeks
</h2>
<a class="grow dib f3-ns no-underline
bg-light-green black pa5" href="#">
hover on this
</a>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, hemos usado la clase dim .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body class="contain">
<h1 class="dim">
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/hovers/
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA