<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> 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>
|