在本文中, 我们将学习如何实现选框使用CSS的菜单效果字幕菜单插入。字幕是一种动画效果, 用于开发网页, 以使某些有吸引力的文本或图像在垂直或水平方向上滚动。
注意：请下载CSS字幕菜单插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。
<link href =" https://use.typekit.net/zhq0vyf.css" rel =" stylesheet" type =" text /css" /> <link href =" css /base.css" rel =" stylesheet"类型=" text /css" />
例子：下面的示例演示了使用HTML控件和基于CSS的给定菜单的字幕效果字幕菜单插入。插件的" base.css"文件的" marquee", " marquee__inner", " menu__item-link"等不同的类被附加到HTML标记, 如下所示, 以获得预期的输出。
<!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">lsbin</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>输出如下：
