mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-17 15:09:31 +00:00
66 lines
2.4 KiB
JavaScript
66 lines
2.4 KiB
JavaScript
import { useGlobal } from '@/lib/global'
|
|
|
|
/**
|
|
* 文章波浪动画
|
|
*/
|
|
export default function WavesArea() {
|
|
const { isDarkMode } = useGlobal()
|
|
const color = isDarkMode ? '#18171d' : '#f7f9fe'
|
|
|
|
return (
|
|
<section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
|
|
<svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
|
<defs>
|
|
<path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
|
|
</defs>
|
|
<g className="parallax">
|
|
<use href="#gentle-wave" x="48" y="0"></use>
|
|
<use href="#gentle-wave" x="48" y="3"></use>
|
|
<use href="#gentle-wave" x="48" y="5"></use>
|
|
<use href="#gentle-wave" x="48" y="7"></use>
|
|
</g>
|
|
</svg>
|
|
<style jsx global>{`
|
|
/* Animation */
|
|
|
|
.parallax > use {
|
|
animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
|
}
|
|
.parallax > use:nth-child(1) {
|
|
animation-delay: -2s;
|
|
animation-duration: 7s;
|
|
fill: ${color};
|
|
opacity: 0.5;
|
|
}
|
|
.parallax > use:nth-child(2) {
|
|
animation-delay: -3s;
|
|
animation-duration: 10s;
|
|
fill: ${color};
|
|
opacity: 0.6;
|
|
}
|
|
.parallax > use:nth-child(3) {
|
|
animation-delay: -4s;
|
|
animation-duration: 13s;
|
|
fill: ${color};
|
|
opacity: 0.7;
|
|
}
|
|
.parallax > use:nth-child(4) {
|
|
animation-delay: -5s;
|
|
animation-duration: 20s;
|
|
fill: ${color};
|
|
}
|
|
|
|
@keyframes move-forever {
|
|
0% {
|
|
transform: translate3d(-90px, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(85px, 0, 0);
|
|
}
|
|
}
|
|
`}
|
|
</style>
|
|
</section>
|
|
)
|
|
}
|