115 lines
3.9 KiB
Vue
115 lines
3.9 KiB
Vue
<template>
|
|
<div class="flowLine">
|
|
<svg width="1919" height="58" viewBox="0 0 1919 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 背景路径 - 静态 -->
|
|
<path class="path-bg" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="rgba(0, 114, 255, 0.2)" stroke-width="4"/>
|
|
|
|
<!-- 动画路径 - 带描边效果 -->
|
|
<path class="path-animated" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="url(#paint0_linear_2539_19618)" stroke-width="4"/>
|
|
|
|
<!-- 主发光点 -->
|
|
<circle class="glow-dot" r="6" fill="url(#radialGradient)">
|
|
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
|
|
<mpath href="#motionPath" />
|
|
</animateMotion>
|
|
<animate attributeName="r" values="5;7;5" dur="2s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<!-- 次要发光点 -->
|
|
<circle class="glow-dot secondary" r="4" fill="url(#radialGradient2)">
|
|
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="1s">
|
|
<mpath href="#motionPath" />
|
|
</animateMotion>
|
|
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<!-- 用于动画的隐藏路径 -->
|
|
<path id="motionPath" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="none"/>
|
|
|
|
<defs>
|
|
<linearGradient id="paint0_linear_2539_19618" x1="852.344" y1="1.29965" x2="853.359" y2="67.7414" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#0072FF"/>
|
|
<stop offset="0.54596" stop-color="#00FFFF"/>
|
|
<stop offset="1" stop-color="#0072FF"/>
|
|
</linearGradient>
|
|
|
|
<radialGradient id="radialGradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(10)">
|
|
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/>
|
|
<stop offset="40%" stop-color="#00FFFF" stop-opacity="1"/>
|
|
<stop offset="70%" stop-color="#0072FF" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="radialGradient2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(8)">
|
|
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
|
|
<stop offset="50%" stop-color="#00FFFF" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<!-- 增强的滤镜效果 -->
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.5 0 0 0 0 1 0 0 0 1 0" result="blue-glow"/>
|
|
<feBlend in="SourceGraphic" in2="blue-glow" mode="screen"/>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
<style scoped>
|
|
.flowLine {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 10px;
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zdy_line_svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 描边动画效果 */
|
|
.path-animated {
|
|
stroke-dasharray: 3000;
|
|
stroke-dashoffset: 3000;
|
|
animation: dash 8s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite;
|
|
filter: url(#glow);
|
|
will-change: stroke-dashoffset;
|
|
}
|
|
|
|
.glow-dot {
|
|
filter: url(#glow);
|
|
will-change: transform;
|
|
}
|
|
|
|
.glow-dot.secondary {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% {
|
|
stroke-dashoffset: 3000;
|
|
opacity: 0.3;
|
|
}
|
|
30% {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
70% {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: -3000;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
</style>
|