HTML+css+js实现仿Mac Docker效果

刘先生..

已于 2023-09-20 13:42:11 修改

阅读量389

点赞数 2

分类专栏：前端小案例文章标签： html css 前端 javascript

于 2023-09-19 13:59:42 首次发布

小猿工作室

本文链接：https://blog.csdn.net/weixin_46221428/article/details/133025603

版权

前端小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 效果展示和原理介绍

Mac Docker效果是一种在Mac操作系统中常见的动画效果，它通常用于应用程序的启动和关闭。该效果的特点是界面元素会平滑地缩放和移动。在网页中实现这种效果，可以利用CSS的transition属性和CSS变量属性来实现。

效果如下：

2. 使用CSS的transition属性实现

CSS的transition属性可以用来定义元素状态改变时的过渡效果，如大小、颜色、透明度等属性的变化。通过设置transition属性，我们可以让元素在状态改变时平滑地过渡，从而实现类似于Mac Docker的效果。例如，可以设置一个元素的宽度和高度在0和x（大于0）之间进行变化，如下所示：

transition: all 0.35s;  
/* all 代表所有支持的属性均有动画，也可以替换为 width 、height、opacity等支持动画的属性 */

3. 使用CSS变量属性实现

CSS变量属性（CSS Custom Properties）可以用来定义可重复使用的值，这些值可以在整个CSS文件中被引用和修改。通过使用CSS变量，我们可以更方便地控制元素的样式，从而实现更复杂的动画效果。例如，可以定义一个名为“scale”的变量来控制元素的大小，然后使用JavaScript来动态修改该变量的值，从而实现缩放效果：

--scale: 1;

items[i].style = "--scale:1.9"

4. 代码示例

以下是一个完整的示例代码，实现了仿Mac Docker效果的按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" id="container">
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
        </div>
    </div>
</body>

</html>
<script>
    let items = document.getElementsByClassName("item")
    for (let i = 0; i < items.length; i++) {
        items[i].onmouseover = function () {
            if (i == 0) {
                items[i].style = "--scale:1.9"
                items[i + 1].style = "--scale:1.6"
                items[i + 2].style = "--scale:1.3"
                for (let j = 0; j < items.length; j++) {
                    if (j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == 1) {
                items[i - 1].style = "--scale:1.6"
                items[i].style = "--scale:1.9"
                items[i + 1].style = "--scale:1.6"
                items[i + 2].style = "--scale:1.3"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 1 && j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == items.length - 1) {
                items[i - 2].style = "--scale:1.3"
                items[i - 1].style = "--scale:1.6"
                items[i].style = "--scale:1.9"
                for (let j = 0; j < items.length; j++) {
                    if (j != i && j != i - 1 && j != i - 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == items.length - 2) {
                items[i - 2].style = "--scale:1.3"
                items[i - 1].style = "--scale:1.6"
                items[i].style = "--scale:1.9"
                items[i + 1].style = "--scale:1.6"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 2 && j != i - 1 && j != i && j != i + 1) {
                        items[j].style = "--scale:1"
                    }
                }
            } else {
                items[i - 2].style = "--scale:1.3"
                items[i - 1].style = "--scale:1.6"
                items[i].style = "--scale:1.9"
                items[i + 1].style = "--scale:1.6"
                items[i + 2].style = "--scale:1.3"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 2 && j != i - 1 && j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            }
        }
    }

    let container = document.getElementById("container")
    container.onmouseleave = function () {
        for (let h = 0; h < items.length; h++) {
            items[h].style = "--scale:1"
        }
    }
</script>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        margin: auto;
        padding: 15px;
        position: fixed;
        left: 50%;
        translate: -50% 0;
        bottom: 20px;
        height: 80px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
    }

    .item {
        --scale: 1;
        padding-bottom: calc((var(--scale) * 50px) - (50px / var(--scale)));
        height: 100%;
        display: flex;
        align-items: flex-end;
        transition: all 0.35s;
    }

    .menu {
        width: calc(50px * var(--scale));
        height: calc(50px * var(--scale));
        background: #000;
        border-radius: calc(10px * var(--scale));
        transition: all 0.35s;
        cursor: pointer;
    }

    .gap {
        width: calc(15px * var(--scale));
        height: 50px;
        background: transparent;
        transition: all 0.35s;
    }
</style>

刘先生..

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+css+js实现仿Mac Docker效果

Mac Docker效果是一种在Mac操作系统中常见的动画效果，它通常用于应用程序的启动和关闭。该效果的特点是界面元素会平滑地缩放和移动。在网页中实现这种效果，可以利用CSS的transition属性和CSS变量属性来实现。
复制链接

扫一扫