121 lines
3.2 KiB
HTML
121 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Luckysheet UI 重构 copy 动画边框绘制</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--width: 60px;
|
||
|
|
--height: 40px;
|
||
|
|
--cubWidth: 0.5;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.main {
|
||
|
|
margin: 100px 100px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
/* border: solid red 1px; */
|
||
|
|
position: relative;
|
||
|
|
width: var(--width);
|
||
|
|
height: var(--height);
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.top,
|
||
|
|
.bottom {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex: 1;
|
||
|
|
width: calc(var(--width) * var(--cubWidth) * 9);
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
transform: translateX(calc(var(--cubWidth) * var(--width) * -7));
|
||
|
|
}
|
||
|
|
|
||
|
|
.cub {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: calc(var(--height) / 2);
|
||
|
|
width: calc(var(--cubWidth) * var(--width));
|
||
|
|
background-color: #55bb8a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
animation: right 1s linear forwards infinite;
|
||
|
|
}
|
||
|
|
.left {
|
||
|
|
animation: left 1s linear forwards infinite;
|
||
|
|
}
|
||
|
|
@keyframes left {
|
||
|
|
100% {
|
||
|
|
transform: translateX(calc(var(--width) / 2 * -1 * 6));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes right {
|
||
|
|
100% {
|
||
|
|
transform: translateX(calc(var(--width) / 2 * 6));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 实现 EwaAndH.gif -->
|
||
|
|
<div class="main">
|
||
|
|
<div class="box">
|
||
|
|
<div class="top">
|
||
|
|
<div class="cub cub1"></div>
|
||
|
|
<div class="cub cub2"></div>
|
||
|
|
<div class="cub cub3"></div>
|
||
|
|
<div class="cub cub4"></div>
|
||
|
|
<div class="cub cub5"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="cub cub6"></div>
|
||
|
|
<div class="cub cub7"></div>
|
||
|
|
<div class="cub cub8"></div>
|
||
|
|
<div class="cub cub9"></div>
|
||
|
|
<div class="cub cub10"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener("click", () => {
|
||
|
|
const cub1 = document.querySelector(".cub1");
|
||
|
|
const cub2 = document.querySelector(".cub2");
|
||
|
|
const cub3 = document.querySelector(".cub3");
|
||
|
|
const cub4 = document.querySelector(".cub4");
|
||
|
|
const cub5 = document.querySelector(".cub5");
|
||
|
|
const cub6 = document.querySelector(".cub6");
|
||
|
|
const cub7 = document.querySelector(".cub7");
|
||
|
|
const cub8 = document.querySelector(".cub8");
|
||
|
|
const cub9 = document.querySelector(".cub9");
|
||
|
|
const cub10 = document.querySelector(".cub10");
|
||
|
|
|
||
|
|
cub1.classList.add("left");
|
||
|
|
cub2.classList.add("left");
|
||
|
|
cub3.classList.add("left");
|
||
|
|
cub4.classList.add("left");
|
||
|
|
cub5.classList.add("left");
|
||
|
|
|
||
|
|
cub6.classList.add("right");
|
||
|
|
cub7.classList.add("right");
|
||
|
|
cub8.classList.add("right");
|
||
|
|
cub9.classList.add("right");
|
||
|
|
cub10.classList.add("right");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|