新增第153个小实例：悬停滚动文字的导航栏

2022-05-20 16:02:56 +08:00 · 2022-05-20 16:02:56 +08:00 · 51fda3357d
parent 573f1eda2e
commit 51fda3357d
4 changed files with 102 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -159,4 +159,5 @@
 149. HTML5+CSS3+JS小实例：可切换方向的无缝衔接图片滚动效果
 150. HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图
 151. HTML5+CSS3+JS小实例：倒计时动画特效
-152. HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
+152. HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
+153. HTML5+CSS3+JS小实例：悬停滚动文字的导航栏
--- a/code/153/153.css
+++ b/code/153/153.css
@ -0,0 +1,53 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中显示 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(to top,#ebf4ff,#f6f6f6);
+}
+.nav{
+    display: flex;
+    list-style: none;
+    background-color: #222;
+    width: 900px;
+    max-width: 90vw;
+}
+.nav li{
+    min-width: 130px;
+    padding: 12px 0;
+    /* 过渡效果 */
+    transition: 0.3s;
+}
+.nav li:hover{
+    background-color: #000;
+}
+.nav li a{
+    color: #fff;
+    text-decoration: none;
+    letter-spacing: 3px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+}
+.nav li a span{
+    position: relative;
+    transition: 0.3s;
+}
+.nav li a span::before{
+    /* data-text是自定义属性（会在js代码里赋值），attr函数可以获取元素的属性值 */
+    content: attr(data-text);
+    position: absolute;
+    /* 默认下移130% */
+    transform: translateY(130%);
+}
+.nav li a:hover span{
+    /* 悬停时上移130% */
+    transform: translateY(-130%);
+}
--- a/code/153/153.html
+++ b/code/153/153.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>悬停滚动文字的导航栏</title>
+    <link rel="stylesheet" href="153.css">
+</head>
+
+<body>
+    <ul class="nav">
+        <li><a href="#">首页</a></li>
+        <li><a href="#">公司介绍</a></li>
+        <li><a href="#">产品案例</a></li>
+        <li><a href="#">案例展示</a></li>
+        <li><a href="#">联系我们</a></li>
+    </ul>
+</body>
+
+</html>
+
+<script src="153.js"></script>
--- a/code/153/153.js
+++ b/code/153/153.js
@ -0,0 +1,23 @@
+// 要操作的元素
+const links=document.querySelectorAll('.nav li a');
+
+// 遍历a标签集合
+links.forEach(link=>{
+    // 将a标签的文本拆分为各个单字
+    let letters=link.textContent.split('');
+    // 将a标签文本清空
+    link.textContent='';
+    // 遍历单字集合
+    letters.forEach((letter,i)=>{
+        // 创建span元素
+        let span=document.createElement('span');
+        // 设置文本
+        span.textContent=letter;
+        // 设置自定义属性（data-text），css中可通过attr函数进行调用
+        span.dataset.text=letter;
+        // 计算动画延迟时间并设置
+        span.style.transitionDelay=i/15+'s';
+        // 追加span元素到a标签
+        link.append(span);
+    })
+})