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>