<svg>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 2" />
</filter>
</svg>

直截了当,没错是用 svg 来实现,其实 css 的样式与 svg 还是蛮接近的(一模一样)

效果

使用

未使用(使用 blur)

鸿蒙开机效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>

<style>
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: black;

--width: 100px;
--height: 100px;
}

.circle-wrap {
width: var(--width, 100px);
height: calc(var(--height) / 2);
padding: 10px;
overflow: hidden;
}

.circle {
height: var(--height);
border: 10px solid #fff;
border-radius: 50%;
box-shadow: 0 0 10px 0 #fff, inset 0 0 10px 0 #fff;
box-sizing: border-box;
}

.circle-wrap:first-of-type {
padding-bottom: 0;
}

.circle-wrap:first-of-type .circle {
transform: translateY(calc(var(--height) / 2));
animation: move 1.2s ease forwards;
}

.circle-wrap:last-of-type {
transform: rotate(180deg);
padding-bottom: 0;
}

.circle-wrap:last-of-type .circle {
transform: translateY(calc(var(--height) / 2));
animation: move 1.2s ease forwards;
filter: url(#blur);
}

svg {
width: 0;
height: 0;
}

@keyframes move {
to {
transform: translateY(0px);
}
}
</style>

<body>
<div class="wrap">
<div class="circle-wrap">
<div class="circle"></div>
</div>

<div class="circle-wrap">
<div class="circle"></div>
</div>
</div>

<svg>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 2" />
</filter>
</svg>
</body>

<script>
// 清除 svg 模糊
const svgBlur = document.querySelector('#blur feGaussianBlur');
const clearBlur = () => {
const value = svgBlur.getAttribute('stdDeviation').split(' ')[1] - 0.08;
if (value > 0) svgBlur.setAttribute('stdDeviation', `0 ${value}`);
else return;
requestAnimationFrame(clearBlur);
}

setTimeout(clearBlur, 1200);
</script>
</html>