新增第223个小实例：暗紫色Tabbar

2023-07-02 16:41:41 +08:00 · 2023-07-02 16:41:41 +08:00 · f60edf658e
parent a3e2325a87
commit f60edf658e
4 changed files with 127 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -230,6 +230,7 @@
 220. HTML5+CSS3小实例：环绕小球弹性loading动画
 221. HTML5+CSS3+JS小实例：文字阴影还能这么玩
 222. HTML5+CSS3+JS小实例：灵动的流边开关切换效果
+223. HTML5+CSS3+JS小实例：暗紫色Tabbar

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/223/223.css
+++ b/code/223/223.css
@ -0,0 +1,78 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #0d142f;
+    /* 自定义变量 */
+    --color:#716895;
+    --active-color:#ac8fd1;
+}
+.tabbar{
+    color: var(--color);
+    display: flex;
+    border-radius: 10px 10px 40px 40px;
+    box-shadow: 0 0 15px 5px var(--color);
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+.tabbar div{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 110px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    --left:0;
+}
+.tabbar div .fa{
+    font-size: 32px;
+}
+.tabbar div span{
+    font-size: 14px;
+    margin-top: 5px;
+}
+.tabbar div::before{
+    content: "";
+    width: 40px;
+    height: 10px;
+    background-color: var(--active-color);
+    border-radius: 50%;
+    position: absolute;
+    left: var(--left);
+    bottom: -5px;
+    /* 模糊滤镜 */
+    filter: blur(6px);
+    /* 默认隐藏 */
+    opacity: 0;
+    transform: translateX(-50%);
+}
+.tabbar div::after{
+    content: "";
+    width: 40px;
+    height: 2px;
+    background-color: var(--active-color);
+    border-radius: 1px;
+    position: absolute;
+    left: var(--left);
+    bottom: -1px;
+    filter: blur(2px);
+    opacity: 0;
+    transform: translateX(-50%);
+}
+/* 悬停样式 */
+.tabbar div:hover{
+    color: var(--active-color);
+    background: linear-gradient(to top,rgba(255,255,255,0.1),transparent);
+}
+.tabbar div:hover::before,
+.tabbar div:hover::after{
+    opacity: 1;
+}
--- a/code/223/223.html
+++ b/code/223/223.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>暗紫色Tabbar</title>
+    <!-- 字体图标库：font-awesome -->
+    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
+    <link rel="stylesheet" href="223.css">
+</head>
+<body>
+    <div class="tabbar">
+        <div>
+            <i class="fa fa-home"></i>
+            <span>Home</span>
+        </div>
+        <div>
+            <i class="fa fa-video-camera"></i>
+            <span>Video</span>
+        </div>
+        <div>
+            <i class="fa fa-plus-circle"></i>
+            <span>Plus</span>
+        </div>
+        <div>
+            <i class="fa fa-commenting"></i>
+            <span>Message</span>
+        </div>
+        <div>
+            <i class="fa fa-user"></i>
+            <span>Me</span>
+        </div>
+    </div>
+</body>
+</html>
+<script src="223.js"></script>
--- a/code/223/223.js
+++ b/code/223/223.js
@ -0,0 +1,12 @@
+// 获取.tabbar下的所有div
+const divs=document.querySelectorAll('.tabbar div');
+
+// 遍历所有div，并绑定鼠标移动事件
+divs.forEach((item)=>{
+    item.addEventListener('mousemove',function(e){
+        // 计算底部光晕的水平位置
+        let left=e.clientX - item.getBoundingClientRect().x;
+        // 将计算好的位置赋值给CSS自定义变量--left
+        item.style.setProperty('--left',left+'px');
+    })
+})