Skip to content

Commit 85db496

Browse files
hepengweihepengwei
committed
新增长虹玻璃动效和雷达扫描动效
1 parent ae81a66 commit 85db496

File tree

12 files changed

+219
-12
lines changed

12 files changed

+219
-12
lines changed

‎public/gradationBar.svg

Lines changed: 22 additions & 0 deletions
Loading

‎src/images/html/car1.png renamed to ‎src/images/card1.png

File renamed without changes.

‎src/images/html/car2.png renamed to ‎src/images/card2.png

File renamed without changes.

‎src/images/html/car3.png renamed to ‎src/images/card3.png

File renamed without changes.

‎src/locale/en-US.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,10 @@ const en_US = {
255255
"Mobius loop bar dynamic effect",
256256
"page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":
257257
"Mobius loop circle dots dynamic effect",
258+
"page.cssDynamicEffect.richDynamicEffect.longRainbowGlass":
259+
"Long rainbow glass dynamic effect",
260+
"page.cssDynamicEffect.richDynamicEffect.radarScan":
261+
"Radar scan dynamic effect",
258262
"page.cssDynamicEffect.richDynamicEffect.tankShaking":
259263
"Tank shaking dynamic effect",
260264

‎src/locale/zh-CN.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,8 @@ const zh_CN = {
221221
"莫比乌斯环循环条动效",
222222
"page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":
223223
"莫比乌斯环循环圆点动效",
224+
"page.cssDynamicEffect.richDynamicEffect.longRainbowGlass": "长虹玻璃动效",
225+
"page.cssDynamicEffect.richDynamicEffect.radarScan": "雷达扫描动效",
224226
"page.cssDynamicEffect.richDynamicEffect.tankShaking": "水罐摇晃动效",
225227

226228
// Css动效-生成正多边形页

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script setup lang="ts">
2+
import ModuleTitle from "components/ModuleTitle.vue";
3+
import card3 from "images/card3.png";
4+
</script>
5+
6+
<template>
7+
<div style="width: 100%">
8+
<div class="container">
9+
<ModuleTitle
10+
i18nTitle="page.cssDynamicEffect.richDynamicEffect.longRainbowGlass"
11+
/>
12+
<div class="content">
13+
<div
14+
class="box"
15+
:style="{ backgroundImage: `url('public/gradationBar.svg')` }"
16+
/>
17+
<svg
18+
version="1.1"
19+
width="280"
20+
height="396"
21+
xmlns="http://www.w3.org/2000/svg"
22+
color-interpolation-filters="sRGB"
23+
>
24+
<filter
25+
id="gradationBarFilter"
26+
primitiveUnits="objectBoundingBox"
27+
x="0"
28+
y="0"
29+
width="100%"
30+
height="100%"
31+
>
32+
<feImage
33+
x="0"
34+
y="0"
35+
result="image_0"
36+
crossOrigin="anonymous"
37+
:href="card3"
38+
preserveAspectRatio="none"
39+
width="1"
40+
height="1"
41+
/>
42+
<feDisplacementMap
43+
scale="0.1"
44+
xChannelSelector="R"
45+
yChannelSelector="G"
46+
in="image_0"
47+
in2="SourceGraphic"
48+
result="displacement_0"
49+
/>
50+
</filter>
51+
</svg>
52+
</div>
53+
</div>
54+
</div>
55+
</template>
56+
57+
<style scoped lang="scss">
58+
.container {
59+
width: 100%;
60+
height: 530px;
61+
display: flex;
62+
justify-content: center;
63+
padding-top: 100px;
64+
65+
.content {
66+
display: flex;
67+
flex-direction: column;
68+
.box {
69+
width: 280px;
70+
height: 396px;
71+
min-height: 396px;
72+
display: flex;
73+
filter: url(#gradationBarFilter);
74+
background-size: 40px auto;
75+
background-repeat: repeat-x;
76+
animation: moveBackground 10s linear infinite;
77+
}
78+
}
79+
80+
@keyframes moveBackground {
81+
0% {
82+
background-position: 0% 0;
83+
}
84+
100% {
85+
background-position: 100% 0;
86+
}
87+
}
88+
}
89+
</style>

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<script setup lang="ts">
2+
import ModuleTitle from "components/ModuleTitle.vue";
3+
</script>
4+
5+
<template>
6+
<div style="width: 100%">
7+
<div class="container">
8+
<ModuleTitle
9+
i18nTitle="page.cssDynamicEffect.richDynamicEffect.radarScan"
10+
/>
11+
<div class="content" />
12+
</div>
13+
</div>
14+
</template>
15+
16+
<style scoped lang="scss">
17+
.container {
18+
width: 100%;
19+
height: 530px;
20+
display: flex;
21+
justify-content: center;
22+
padding-top: 130px;
23+
24+
$radarSize: 300px;
25+
.content {
26+
display: flex;
27+
flex-direction: column;
28+
width: $radarSize;
29+
height: $radarSize;
30+
background: /* 重复的径向渐变 圈圈 */ repeating-radial-gradient(
31+
transparent 0,
32+
transparent 28px,
33+
darkcyan 28px,
34+
darkcyan 30px
35+
),
36+
/* 线性渐变 中间横线 */
37+
linear-gradient(
38+
transparent 49.75%,
39+
darkcyan 49.75%,
40+
darkcyan 50.25%,
41+
transparent 50.25%
42+
),
43+
/* 线性渐变 中间竖线 */
44+
linear-gradient(
45+
90deg,
46+
transparent 49.75%,
47+
darkcyan 49.75%,
48+
darkcyan 50.25%,
49+
transparent 50.25%
50+
),
51+
#000;
52+
border-radius: 50%;
53+
position: relative;
54+
55+
&::after {
56+
content: "";
57+
position: absolute;
58+
width: calc(240px / 2);
59+
height: calc(240px / 2);
60+
background: linear-gradient(
61+
45deg,
62+
rgba(0, 0, 0, 0) 46%,
63+
rgba(0, 255, 255, 1) 100%
64+
);
65+
/* 设置左上角圆角100%, 形成扇形 */
66+
border-radius: 100% 0 0 0;
67+
top: 30px;
68+
left: 30px;
69+
animation: scanning 3s linear infinite;
70+
/* 设置旋转元素的基点位置 */
71+
transform-origin: 100% 100%;
72+
}
73+
}
74+
75+
@keyframes scanning {
76+
to {
77+
transform: rotate(360deg);
78+
}
79+
}
80+
}
81+
</style>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,13 @@ import ModuleTitle from 'components/ModuleTitle.vue';
2020
<style scoped lang="scss">
2121
.container {
2222
width: 100%;
23-
height: 380px;
23+
height: 500px;
2424
display: flex;
2525
justify-content: center;
26-
padding-top: 120px;
26+
padding-top: 200px;
2727
position: relative;
2828
2929
$bottleWidth: 200px;
30-
3130
.content {
3231
display: flex;
3332
flex-direction: column;
@@ -83,7 +82,7 @@ import ModuleTitle from 'components/ModuleTitle.vue';
8382
8483
.bottleBottom {
8584
position: absolute;
86-
top: calc(100% - 66px);
85+
top: calc(100% - 106px);
8786
left: 50%;
8887
width: $bottleWidth;
8988
height: 30px;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import TextOutlineAnimation1 from "./components/TextOutlineAnimation1.vue";
1717
import TextOutlineAnimation2 from "./components/TextOutlineAnimation2.vue";
1818
import MobiusBand1 from "./components/MobiusBand1.vue";
1919
import MobiusBand2 from "./components/MobiusBand2.vue";
20+
import LongRainbowGlass from "./components/LongRainbowGlass.vue";
21+
import RadarScan from "./components/RadarScan.vue";
2022
import TankShaking from "./components/TankShaking.vue";
2123
2224
useScrollToTop();
@@ -74,6 +76,14 @@ useScrollToTop();
7476
<MobiusBand2 />
7577
</div>
7678
</div>
79+
<div class="multipleColumnsBox">
80+
<div class="box">
81+
<LongRainbowGlass />
82+
</div>
83+
<div class="box">
84+
<RadarScan />
85+
</div>
86+
</div>
7787
<div class="box">
7888
<TankShaking />
7989
</div>

0 commit comments

Comments
 (0)