Skip to content

Commit 7c6db09

Browse files
hepengweihepengwei
committed
新增涟漪文字动效
1 parent 3abd492 commit 7c6db09

File tree

5 files changed

+150
-5
lines changed

5 files changed

+150
-5
lines changed

‎src/locale/en-US.ts

+2
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,8 @@ const en_US = {
248248
"Searchlight text dynamic effect",
249249
"page.cssDynamicEffect.richDynamicEffect.wavyText":
250250
"Wavy text dynamic effect",
251+
"page.cssDynamicEffect.richDynamicEffect.rippleText":
252+
"Ripple text dynamic effect",
251253
"page.cssDynamicEffect.richDynamicEffect.textLineDisplay":
252254
"Text line display dynamic effect",
253255
"page.cssDynamicEffect.richDynamicEffect.textLineLoop":

‎src/locale/zh-CN.ts

+1
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ const zh_CN = {
216216
"page.cssDynamicEffect.richDynamicEffect.luminousText": "发光文字动效",
217217
"page.cssDynamicEffect.richDynamicEffect.searchlightText": "探照灯文字动效",
218218
"page.cssDynamicEffect.richDynamicEffect.wavyText": "波浪文字动效",
219+
"page.cssDynamicEffect.richDynamicEffect.rippleText": "涟漪文字动效",
219220
"page.cssDynamicEffect.richDynamicEffect.textLineDisplay": "文字线条显示动效",
220221
"page.cssDynamicEffect.richDynamicEffect.textLineLoop": "文字线条循环动效",
221222
"page.cssDynamicEffect.richDynamicEffect.mobiusLoopBar":

‎src/pages/css/RichDynamicEffect/components/RippleText.vue

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script setup lang="ts">
2+
// 与预期效果不符，未找到原因
3+
import { onMounted } from "vue";
4+
import ModuleTitle from "components/ModuleTitle.vue";
5+
6+
const width = 400;
7+
const height = 260;
8+
9+
onMounted(() => {
10+
const svgHtml = document.querySelector("#svg");
11+
if (!svgHtml) return;
12+
const svgString = svgHtml.outerHTML;
13+
14+
// 对 SVG 字符串进行 URL 编码
15+
const encodedSvg = encodeURIComponent(svgString);
16+
17+
// 构建 data URI
18+
const dataUri = `data:image/svg+xml,${encodedSvg}`;
19+
const feImageList = document.querySelectorAll(".feImage");
20+
for (let image of feImageList) image.setAttribute("href", dataUri);
21+
});
22+
</script>
23+
24+
<template>
25+
<div style="width: 100%">
26+
<div class="container">
27+
<ModuleTitle
28+
i18nTitle="page.cssDynamicEffect.richDynamicEffect.rippleText"
29+
/>
30+
<div class="content">River</div>
31+
<svg
32+
id="svg"
33+
version="1.1"
34+
:width="width"
35+
:height="height"
36+
xmlns="http://www.w3.org/2000/svg"
37+
color-interpolation-filters="sRGB"
38+
>
39+
<defs>
40+
<filter id="filter">
41+
<feTurbulence
42+
type="turbulence"
43+
numOctaves="1"
44+
seed="1"
45+
baseFrequency="0.065 0.156"
46+
></feTurbulence>
47+
</filter>
48+
</defs>
49+
<rect :width="width" :height="height" filter="url(#filter)" />
50+
</svg>
51+
52+
<svg xmlns="http://www.w3.org/2000/svg">
53+
<defs>
54+
<filter id="ripplefilter">
55+
<feImage
56+
id="feImage1"
57+
class="feImage"
58+
href=""
59+
result="feImage1"
60+
></feImage>
61+
62+
<feImage
63+
id="feImage2"
64+
class="feImage"
65+
href=""
66+
result="feImage2"
67+
x="-100%"
68+
></feImage>
69+
70+
<feMerge>
71+
<feMergeNode in="feImage1"></feMergeNode>
72+
<feMergeNode in="feImage2"></feMergeNode>
73+
</feMerge>
74+
75+
<feDisplacementMap
76+
in="SourceGraphic"
77+
scale="60"
78+
xChannelSelector="R"
79+
yChannelSelector="B"
80+
></feDisplacementMap>
81+
82+
<animate
83+
class="animate"
84+
xlinkHref="#feImage1"
85+
attributeName="x"
86+
dur="10s"
87+
from="0%"
88+
to="100%"
89+
fill="freeze"
90+
repeatCount="indefinite"
91+
/>
92+
<animate
93+
class="animate"
94+
xlinkHref="#feImage2"
95+
attributeName="x"
96+
dur="10s"
97+
from="-100%"
98+
to="0%"
99+
fill="freeze"
100+
repeatCount="indefinite"
101+
/>
102+
</filter>
103+
</defs>
104+
</svg>
105+
</div>
106+
</div>
107+
</template>
108+
109+
<style scoped lang="scss">
110+
.container {
111+
width: 100%;
112+
height: 400px;
113+
display: flex;
114+
justify-content: center;
115+
padding-top: 60px;
116+
position: relative;
117+
118+
.content {
119+
width: 480px;
120+
height: 220px;
121+
filter: url(#ripplefilter);
122+
font-size: 160px;
123+
font-weight: 600;
124+
font-family: "SourceHanSansCN-Bold";
125+
}
126+
127+
svg {
128+
position: absolute;
129+
top: 0;
130+
left: 0;
131+
visibility: hidden;
132+
pointer-events: none;
133+
}
134+
}
135+
</style>

‎src/pages/css/RichDynamicEffect/components/WaveFont.vue renamed to ‎src/pages/css/RichDynamicEffect/components/WavyText.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ModuleTitle from "components/ModuleTitle.vue";
1414

1515
<style scoped lang="scss">
1616
.container {
17-
height: 600px;
17+
height: 400px;
1818
display: flex;
1919
flex: 1;
2020
position: relative;
@@ -24,8 +24,9 @@ import ModuleTitle from "components/ModuleTitle.vue";
2424
position: absolute;
2525
top: calc(50% + 20px);
2626
left: 50%;
27-
font-size: 22vw;
27+
font-size: 160px;
2828
font-weight: 600;
29+
font-family: "SourceHanSansCN-Bold";
2930
transform: translate(-50%, -50%);
3031
}
3132

‎src/pages/css/RichDynamicEffect/index.vue

+9-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import TextAnimation from "./components/TextAnimation.vue";
1212
import TextSearchlight from "./components/TextSearchlight.vue";
1313
import DisplayTextInSmoke from "./components/DisplayTextInSmoke.vue";
1414
import PlayVideoInText from "./components/PlayVideoInText.vue";
15-
import WaveFont from "./components/WaveFont.vue";
15+
import WavyText from "./components/WavyText.vue";
16+
import RippleText from "./components/RippleText.vue";
1617
import TextOutlineAnimation1 from "./components/TextOutlineAnimation1.vue";
1718
import TextOutlineAnimation2 from "./components/TextOutlineAnimation2.vue";
1819
import MobiusBand1 from "./components/MobiusBand1.vue";
@@ -57,8 +58,13 @@ useScrollToTop();
5758
<div class="box">
5859
<PlayVideoInText />
5960
</div>
60-
<div class="box">
61-
<WaveFont />
61+
<div class="multipleColumnsBox">
62+
<div class="box">
63+
<WavyText />
64+
</div>
65+
<div class="box">
66+
<RippleText />
67+
</div>
6268
</div>
6369
<div class="multipleColumnsBox">
6470
<div class="box">

0 commit comments

Comments
 (0)