En este artículo, aprenderemos cómo implementar el efecto de marquesina para un menú utilizando el complemento CSS MarqueeMenu . Marquee es un tipo de efecto de animación que se utiliza en el desarrollo de páginas web para obtener texto atractivo o desplazamiento de imágenes en direcciones verticales u horizontales.
Nota: descargue el complemento CSS MarqueeMenu en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<link href=”https://use.typekit.net/zhq0vyf.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/base.css” rel=”stylesheet” type =”texto/css”/>
Ejemplo: El siguiente ejemplo demuestra el efecto de marquesina para el menú dado usando controles HTML y el complemento MarqueeMenu basado en CSS . Diferentes clases como «marquee», «marquee__inner», «menu__item-link» del archivo «base.css» del complemento se adjuntan a las etiquetas HTML como se muestra a continuación para obtener el resultado esperado.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>CSS-only Marquee Menu Effect </title>
<meta name="description"
content="A menu with a css-only marquee hover effect" />
<link rel="stylesheet"
href="https://use.typekit.net/zhq0vyf.css">
<link rel="stylesheet"
type="text/css"
href="css/base.css" />
<style>
body{
text-align:center;
}
</style>
</head>
<body class="demo-1">
<h2 style="color:green">GeeksForGeeks</h2>
<b>Marquee Menu Effect using CSS</b>
<main>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link">Links</a>
<img class="menu__item-img"
src="img/background1.jpg"
alt="geeks image"/>
<div class="marquee">
<div class="marquee__inner"
aria-hidden="true">
<span>Hyperlinks</span>
<span>Hypertexts</span>
<span>Hypermedia</span>
<span>Graphics</span>
</div>
</div>
</div>
<div class="menu__item">
<a class="menu__item-link">HTML</a>
<img class="menu__item-img"
src="img/background2.jpg"
alt="gfg image"/>
<div class="marquee">
<div class="marquee__inner"
aria-hidden="true">
<span>Attributes</span>
<span>Paragraphs</span>
<span>Head</span>
<span>Tables</span>
<span>Lists</span>
</div>
</div>
</div>
<div class="menu__item">
<a class="menu__item-link">CSS</a>
<img class="menu__item-img"
src="img/background3.jpg"
alt="GFG image"/>
<div class="marquee">
<div class="marquee__inner"
aria-hidden="true">
<span>Inline styles</span>
<span>External CSS</span>
<span>Internal CSS</span>
</div>
</div>
</div>
<div class="menu__item">
<a class="menu__item-link">Geeks</a>
<img class="menu__item-img"
src="img/geeksimage1.png"
alt="GFG image"/>
<div class="marquee">
<div class="marquee__inner"
aria-hidden="true">
<span>PHP</span>
<span>jQuery</span>
<span>Algorithm</span>
<span>JavaScript</span>
<span>MySQL</span>
</div>
</div>
</div>
<div class="menu__item">
<a class="menu__item-link">GeeksWeek</a>
<img class="menu__item-img"
src="img/gfg2.jpg"
alt="gfg image"/>
<div class="marquee">
<div class="marquee__inner"
aria-hidden="true">
<span>GeeksWeek</span>
<span>Contact</span>
<span>GeeksWeek</span>
<span>Contest</span>
</div>
</div>
</div>
</nav>
</main>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA