Skip to content

V
vue3-quasar-ts-study01
Commit cc5d4896 authored by hucy's avatar hucy ☘
Browse files
Options

fix:动画

parent 7740490e
Hide whitespace changes
Inline Side-by-side
Showing with 1543 additions and 25 deletions
package-lock.json
View file @ cc5d4896
......@@ -12,15 +12,19 @@
"@quasar/extras": "^1.0.0",
"ag-grid-community": "^28.0.0",
"ag-grid-vue3": "^28.0.0",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.6.5",
"decimal.js": "^10.4.2",
"echarts": "^5.3.2",
"gsap": "^3.11.3",
"hover-effect": "^1.1.0",
"lodash-es": "^4.17.21",
"mitt": "^3.0.0",
"pinia": "^2.0.14",
"quasar": "^2.6.0",
"swiper": "^8.4.5",
"three": "^0.147.0",
"vue": "^3.0.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.0",
......@@ -3292,6 +3296,11 @@
"ajv": "^6.9.1"
}
},
"node_modules/animejs": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
},
"node_modules/ansi-escapes": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
......@@ -6491,6 +6500,11 @@
"dev": true,
"license": "ISC"
},
"node_modules/gsap": {
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
},
"node_modules/gzip-size": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
......@@ -6580,6 +6594,25 @@
"he": "bin/he"
}
},
"node_modules/hover-effect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz",
"integrity": "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg==",
"dependencies": {
"gsap": "^2.0.2",
"three": "^0.99.0"
}
},
"node_modules/hover-effect/node_modules/gsap": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
"integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
},
"node_modules/hover-effect/node_modules/three": {
"version": "0.99.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.99.0.tgz",
"integrity": "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
},
"node_modules/hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
......@@ -10528,6 +10561,11 @@
"dev": true,
"license": "MIT"
},
"node_modules/three": {
"version": "0.147.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
"integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
},
"node_modules/through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......@@ -13954,6 +13992,11 @@
"dev": true,
"requires": {}
},
"animejs": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
},
"ansi-escapes": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
......@@ -16132,6 +16175,11 @@
"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
"dev": true
},
"gsap": {
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
},
"gzip-size": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
......@@ -16189,6 +16237,27 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"hover-effect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz",
"integrity": "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg==",
"requires": {
"gsap": "^2.0.2",
"three": "^0.99.0"
},
"dependencies": {
"gsap": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
"integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
},
"three": {
"version": "0.99.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.99.0.tgz",
"integrity": "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
}
}
},
"hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
......@@ -18845,6 +18914,11 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
"three": {
"version": "0.147.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
"integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......
quasar.config.js
View file @ cc5d4896
......@@ -86,7 +86,12 @@ module.exports = configure(function (ctx) {
proxy: {},
},
extras: ['material-icons', 'fontawesome-v6', 'bootstrap-icons'],
extras: [
'material-icons',
'ionicons-v4',
'fontawesome-v6',
'bootstrap-icons',
],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
framework: {
......
src/layouts/MainLayout.vue
View file @ cc5d4896
......@@ -171,6 +171,13 @@ export default defineComponent({
link: '/page8',
active: false,
},
{
title: '九',
caption: '动画2',
icon: require('./menuListIcons/page8.svg'),
link: '/page9',
active: false,
},
];
for (const item of lists) {
......
src/modules/page7/config.ts
View file @ cc5d4896
......@@ -22,30 +22,37 @@ export const X_DATA = [
'2022-11-28',
'2022-11-29',
'2022-11-30',
'2022-12-01',
'2022-12-02',
'2022-12-03',
'2022-12-04',
'2022-12-05',
'2022-12-06',
'2022-12-07',
];
// 本土感染者
export const LOCAL_INFECTED = [
30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316, 383, 473, 537, 591,
735, 770, 910, 829, 705, 764,
735, 770, 910, 829, 705, 764, 516, 476, 462, 435, 339, 277, 162,
];
// 省感染者
export const PROVINCE_INNER_INFECTED = [
16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280, 346, 428, 509, 547,
690, 718, 853, 763, 660, 716,
690, 718, 853, 763, 660, 716, 501, 448, 430, 402, 334, 271, 159,
];
// 外省来（返）蓉感染者
export const PROVINCE_OUT_INFECTED = [
14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36, 37, 45, 28, 44, 45, 52,
57, 66, 45, 48,
57, 66, 45, 48, 15, 28, 32, 33, 5, 6, 3,
];
// 境外输入感染者
export const OFFSHORE_INPUT_INFECTED = [
7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20, 8, 13, 11, 13, 22, 16, 13, 15,
16, 20,
16, 20, 8, 29, 21, 23, 26, 17, 26,
];
export const LABEL_DATA = [
......@@ -54,4 +61,4 @@ export const LABEL_DATA = [
'外省来（返）蓉感染者',
'境外输入感染者',
];
export const COLOR_LIST = ['#E8110F', '#f29c2b', '#eec60a', '#95E1D3'];
export const COLOR_LIST = ['#FF6384', '#FF9F40', '#FFCD56', '#4BC0C0'];
src/modules/page8/IndexPage.vue
View file @ cc5d4896
<!--
* 草稿
* 动画
* https://www.youtube.com/@OnlineTutorialsYT/playlists
-->
<script setup lang="ts">
// import { ref } from 'vue';
import LoadingCircle from './element/LoadingCircle.vue';
import ButtonHover from './element/ButtonHover.vue';
import Text3D from './element/Text3D.vue';
import LightedText from './element/LightedText.vue';
// import LightedText from './element/LightedText.vue';
import Rotate3D from './element/Rotate3D.vue';
import TypewritersText from './element/TypewritersText.vue';
import BoderAnimation from './element/BoderAnimation.vue';
import RangeSlider from './element/RangeSlider.vue';
import SearchInput from './element/SearchInput.vue';
import SwiperCard from './element/SwiperCard.vue';
import DropDownMenu from './element/DropDownMenu.vue';
import MagicMenuIndicator from './element/MagicMenuIndicator.vue';
</script>
<template>
<div class="box">
......@@ -29,7 +32,8 @@ import SwiperCard from './element/SwiperCard.vue';
<div class="column items-center">
<div class="my-card" style="width: 460px; height: 160px">
<lighted-text />
<!-- <lighted-text /> -->
这个有点儿卡
</div>
<div class="my-card" style="height: 140px">
<typewriters-text />
......@@ -49,9 +53,13 @@ import SwiperCard from './element/SwiperCard.vue';
<div class="my-card" style="width: 480px">
<search-input />
</div>
<div class="my-card"></div>
<div class="my-card" style="width: 540px">
<magic-menu-indicator />
</div>
<div class="row no-wrap">
<div class="my-card"></div>
<div class="my-card" style="height: 500px">
<drop-down-menu />
</div>
<div class="my-card" style="width: 900px; height: 500px">
<swiper-card />
......@@ -77,9 +85,9 @@ import SwiperCard from './element/SwiperCard.vue';
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.4s;
transition: all 0.5s;
&:hover {
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
// scale: 1.1;
z-index: 99;
}
......
src/modules/page8/element/DropDownMenu.vue 0 → 100644
View file @ cc5d4896
<script setup lang="ts">
import { ref } from 'vue';
const isActive = ref(false);
function clickMenu() {
isActive.value = !isActive.value;
}
</script>
<template>
<div class="content fit center">
<div class="navigation" :class="{ active: isActive }">
<div class="user-box">
<div class="img-box">
<img src="https://cdn.quasar.dev/img/avatar2.jpg" alt="" />
</div>
<p class="username">User name</p>
</div>
<div class="menu-toggle" @click="clickMenu"></div>
<ul class="menu">
<li>
<a href="javascript:volid(0);"
><i class="bi bi-person"></i>My Profile</a
>
</li>
<li>
<a href="javascript:volid(0);"
><i class="bi bi-chat-dots"></i>Messages</a
>
</li>
<li>
<a href="javascript:volid(0);"
><i class="bi bi-bell"></i>Notification</a
>
</li>
<li>
<a href="javascript:volid(0);"><i class="bi bi-gear"></i>Settings</a>
</li>
<li>
<a href="javascript:volid(0);"
><i class="bi bi-question"></i>Help & Support</a
>
</li>
<li>
<a href="javascript:volid(0);"
><i class="bi bi-box-arrow-right"></i>Logout</a
>
</li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
.content {
background: linear-gradient(45deg, #4e65ff, #92effd);
position: relative;
}
.navigation {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
height: 60px;
background-color: #fff;
box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
transition: height 0.5s, width 0.5s;
transition-delay: 0s, 0.75s;
overflow: hidden;
.user-box {
position: relative;
width: 60px;
height: 60px;
background-color: #fff;
display: flex;
align-items: center;
overflow: hidden;
transition: 0.5s;
transition-delay: 0.5s;
.img-box {
position: relative;
min-width: 60px;
height: 60px;
background-color: #000;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.username {
white-space: nowrap;
color: #555;
font-size: 1.1em;
}
}
.menu-toggle {
position: relative;
width: 60px;
height: 60px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&::before {
position: absolute;
content: '';
width: 32px;
height: 2px;
background-color: #555;
transform: translateY(-10px);
box-shadow: 0 10px #555;
transition: 0.5s;
}
&::after {
position: absolute;
content: '';
width: 32px;
height: 2px;
background-color: #555;
transform: translateY(10px);
transition: 0.5s;
}
}
}
.active {
width: 300px;
height: 400px;
transition: width 0.5s, height 0.5s;
transition-delay: 0s, 0.75s;
.menu-toggle {
&::before {
transform: translateY(0) rotate(45deg);
box-shadow: 0 0 #555;
}
&::after {
transform: translateY(0) rotate(-45deg);
box-shadow: 0 0 #555;
}
}
.user-box {
width: calc(100% - 60px);
transition-delay: 0s;
}
}
.menu {
position: absolute;
width: 100%;
height: calc(100% - 60px);
margin-top: 60px;
padding: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
li {
list-style: none;
a {
display: flex;
align-items: center;
margin: 18px 0;
font-size: 1em;
gap: 10px;
text-decoration: none;
color: #555;
i {
font-size: 1.5em;
}
&:hover {
color: #4e65ff;
}
}
}
}
</style>
src/modules/page8/element/MagicMenuIndicator.vue 0 → 100644
View file @ cc5d4896
<script setup lang="ts">
import { ref, reactive } from 'vue';
const activeLink = ref(1);
const menuList = reactive([
{
id: 1,
icon: 'bi bi-house-door',
text: 'Home',
},
{
id: 2,
icon: 'bi bi-person',
text: 'Profile',
},
{
id: 3,
icon: 'bi bi-chat',
text: 'Mesaage',
},
{
id: 4,
icon: 'bi bi-camera',
text: 'Photos',
},
{
id: 5,
icon: 'bi bi-gear',
text: 'Settings',
},
]);
function clickList(val: number) {
activeLink.value = val;
}
</script>
<template>
<div class="content fit center">
<div class="navigation">
<ul>
<li
class="list"
:class="{ active: item.id === activeLink }"
@click="clickList(item.id)"
v-for="item in menuList"
:key="item.id"
>
<a href="javascript:volid(0);">
<span class="icon"><i :class="item.icon"></i></span>
<span class="text">{{ item.text }}</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
background-color: #222327;
}
.navigation {
width: 400px;
height: 70px;
background-color: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
ul {
display: flex;
width: 350px;
li {
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
.icon {
position: relative;
display: block;
line-height: 75px;
font-size: 1.5em;
text-align: center;
transition: 0.5s;
color: #222327;
}
.text {
position: absolute;
color: #222327;
font-weight: 400;
font-size: 0.75em;
letter-spacing: 0.05em;
opacity: 0;
transform: translateY(20px);
transition: 0.5s;
}
}
&.active {
a .icon {
transform: translateY(-36px);
}
a .text {
opacity: 1;
transform: translateY(10px);
}
}
}
}
}
.indicator {
position: absolute;
top: -50%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #29fd53;
border: 6px solid #222327;
transition: 0.5s;
&::before {
position: absolute;
content: '';
top: 50%;
left: -22px;
width: 20px;
height: 20px;
border-top-right-radius: 20px;
box-shadow: 0px -10px 0 0 #222327;
background-color: transparent;
}
&::after {
position: absolute;
content: '';
top: 50%;
right: -22px;
width: 20px;
height: 20px;
border-top-left-radius: 20px;
box-shadow: 0px -10px 0 0 #222327;
background-color: transparent;
}
}
.navigation ul li:nth-child(1).active ~ .indicator {
transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator {
transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
transform: translateX(calc(70px * 4));
}
</style>
src/modules/page8/element/SwiperCard.vue
View file @ cc5d4896
......@@ -16,7 +16,7 @@ onMounted(() => {
modifier: 2,
slideShadows: true,
},
loop: true,
loop: false,
});
});
</script>
......@@ -148,14 +148,14 @@ onMounted(() => {
<style lang="scss" scoped>
.content {
:deep(.swiper-3d .swiper-slide-shadow-left) {
background-image: none;
}
:deep(.swiper-3d .swiper-slide-shadow-right) {
background-image: none;
}
// :deep(.swiper-3d .swiper-slide-shadow-left) {
// background-image: none;
// }
// :deep(.swiper-3d .swiper-slide-shadow-right) {
// background-image: none;
// }
:deep(.swiper-slide-active) {
filter: blur(0);
// filter: blur(0);
background-color: #fff;
}
}
......@@ -167,7 +167,7 @@ onMounted(() => {
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #7abed1;
background-color: #9f6b65;
}
.swiper {
width: 100%;
......@@ -184,7 +184,7 @@ onMounted(() => {
background-color: #d1ebff;
border-radius: 10px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
filter: blur(4px);
// filter: blur(4px);
}
.mycard {
box-sizing: border-box;
......@@ -200,14 +200,14 @@ onMounted(() => {
.details {
display: flex;
align-items: center;
justify-content: end;
justify-content: flex-end;
margin-top: 10px;
h3 {
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: #7abed1;
color: #9f6b65;
line-height: 1.1em;
text-align: right;
margin-bottom: 0px;
......
src/modules/page9/IndexPage.vue 0 → 100644
View file @ cc5d4896
<!--
* 动画2
* https://www.youtube.com/@OnlineTutorialsYT/playlists
-->
<script setup lang="ts">
import { ref } from 'vue';
import TextVue from './element/TextVue.vue';
import WorkingDigitalClock from './element/WorkingDigitalClock .vue';
import SvgLineDrawingAnimation from './element/SvgLineDrawingAnimation.vue';
import FlyingTextAnimationEffects from './element/FlyingTextAnimationEffects.vue';
import TransformationAnimation from './element/TransformationAnimation.vue';
import ImageDistortionHoverEffects from './element/ImageDistortionHoverEffects.vue';
const listData = [
{
title: '测试',
name: 'text-vue',
},
{
title: 'SVG 数字时钟',
name: 'working-digital-clock',
},
{
title: 'SVG 画线动画',
name: 'svg-line-drawing-animation',
},
{
title: '飞行文本动画效果 ',
name: 'flying-text-animation-effects',
},
{
title: '变形动画',
name: 'transformation-animation',
},
{
title: '图像悬停扭曲效果',
name: 'image-distortion-hover-effects',
},
];
const isShow = ref(true);
const elementName = ref('image-distortion-hover-effects');
const elementTitle = ref('');
function onclick(data: any) {
elementTitle.value = data.title;
elementName.value = data.name;
isShow.value = true;
}
function goBack() {
isShow.value = false;
}
</script>
<template>
<div>
<div v-if="isShow" class="main">
<div class="action">
<q-btn
@click="goBack"
round
flat
icon="bi-arrow-left"
size="12px"
style="color: #555"
/>
<span>{{ elementTitle }}</span>
</div>
<div class="main-content">
<text-vue v-if="elementName === 'text-vue'" />
<working-digital-clock v-if="elementName === 'working-digital-clock'" />
<svg-line-drawing-animation
v-if="elementName === 'svg-line-drawing-animation'"
/>
<flying-text-animation-effects
v-if="elementName === 'flying-text-animation-effects'"
/>
<transformation-animation
v-if="elementName === 'transformation-animation'"
/>
<image-distortion-hover-effects
v-if="elementName === 'image-distortion-hover-effects'"
/>
</div>
</div>
<div v-else>
<ul class="list">
<li
@click="onclick(item)"
v-for="(item, index) in listData"
:key="index"
>
<p class="title">
{{ item.title }}
</p>
</li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
.list {
padding: 20px;
li {
list-style: none;
.title {
cursor: pointer;
font-size: 16px;
color: #555;
&:hover {
text-decoration: underline;
}
}
}
}
.main {
.action {
height: 40px;
background-color: #fff;
line-height: 40px;
box-sizing: border-box;
}
.main-content {
position: relative;
height: calc(100vh - 90px);
}
}
</style>
src/modules/page9/element/FlyingTextAnimationEffects.vue 0 → 100644
View file @ cc5d4896
<!--
* 飞行文本动画效果
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';
const textRef = ref<any>(null);
onMounted(() => {
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
// `\S`匹配一个非空白字符。
textRef.value.innerHTML = textRef.value.textContent.replace(
/\S/g,
'<span>$&</span>'
);
const animation = anime.timeline({
targets: '.text span',
easing: 'easeInOutExpo',
loop: true,
});
animation
.add({
rotate: function () {
return anime.random(-360, 360);
},
translateX: function () {
return anime.random(-500, 500);
},
translateY: function () {
return anime.random(-500, 500);
},
duration: 5000,
delay: anime.stagger(20),
})
.add({
rotate: 0,
translateX: 0,
translateY: 0,
duration: 5000,
delay: anime.stagger(20),
});
});
</script>
<template>
<div class="box">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section -->
<section>
<p class="text" ref="textRef">
你说我在做梦吗？人生如梦，我投入的却是真情。世界先爱了我，我不能不爱它。
只记花开不记人，你在花里，如花在风中。
那一年，花开得不是最好，可是还好，我遇到你；那一年，花开得好极了，好像专是为了你；那一年，花开得很迟，还好，有你。、“什么事都轻描淡写，毫不装腔作势。说话自然也流露出得意，可是得意中有还有一点对于自己的嘲讽。这是一点本事。可是人最好没有这点本事。他正因为有这些本事，才种种不如别人。”
</p>
</section>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100%;
height: 100%;
}
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #130e23;
.text {
position: relative;
text-align: center;
color: #00cefe;
margin: 40px;
max-width: 650px;
}
}
:deep(section .text span) {
position: relative;
display: inline-block;
}
</style>
src/modules/page9/element/ImageDistortionHoverEffects.vue 0 → 100644
View file @ cc5d4896
<!--
* 图像悬停扭曲效果
* https://www.youtube.com/@OnlineTutorialsYT/playlists
* https://www.youtube.com/watch?v=ZcJ4ANTP8zk&list=PL5e68lK9hEzdwblnDobNUCJKm6mFoWP8m&index=2
* https://github.com/robin-dela/hover-effect
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import hoverEffect from 'hover-effect';
onMounted(() => {
Array.from(document.querySelectorAll('.img-box')).forEach((e) => {
const imgs = Array.from(e.querySelectorAll('img'));
new hoverEffect({
parent: e,
intensity: 0.3,
image1: imgs[0].getAttribute('src'),
image2: imgs[1].getAttribute('src'),
displacementImage: imgs[0].getAttribute('src'),
});
});
});
</script>
<template>
<div class="box">
<div class="container">
<div class="img-box">
<img src="../imgs/2.jpg" alt="" />
<img src="../imgs/4.jpg" alt="" />
</div>
<div class="img-box">
<img src="../imgs/5.jpg" alt="" />
<img src="../imgs/6.jpg" alt="" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 1480px;
display: flex;
justify-content: space-between;
align-items: center;
.img-box {
position: relative;
width: 700px;
height: 400px;
margin: 20px;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
object-fit: cover;
display: none;
}
}
}
</style>
src/modules/page9/element/SvgLineDrawingAnimation.vue 0 → 100644
View file @ cc5d4896
<!--
* SVG画线动画
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';
onMounted(() => {
let pathEls = document.querySelectorAll('path');
for (let i = 0; i < pathEls.length; i++) {
let pathEl = pathEls[i];
let offset = anime.setDashoffset(pathEl);
pathEl.setAttribute('stroke-dashoffset', offset);
anime({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: anime.random(1000, 3000),
delay: anime.random(0, 2000),
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
autoplay: true,
});
}
});
</script>
<template>
<div class="box">
<div class="anim">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 800">
<g fill="none" fill-rule="evenodd">
<path
stroke="#31B495"
d="M781.02 488.77v69.78c0 1.08-.88 1.96-1.97 1.96l-135.12-.04c-1.09 0-2.6.62-3.38 1.39l-39.23 38.96a5.52 5.52 0 0 1-3.37 1.4h-75.38a1.97 1.97 0 0 1-1.97-1.97v-33.5"
/>
<path
stroke="#F4D21F"
d="M674.88 355.57l45.54-45.24a5.42 5.42 0 0 0 1.39-3.35l-.06-10.38c0-1.08-.63-2.58-1.4-3.35l-43.38-43.07a1.94 1.94 0 0 1 0-2.77l82.83-82.25a5.52 5.52 0 0 1 3.37-1.4l44.94.1c1.08 0 2.6-.62 3.37-1.37L952.5 22.65"
/>
<path
stroke="#1AACA8"
d="M507-76.68v265.47a4 4 0 0 0 4 3.99H566c1.08 0 1.97.88 1.97 1.96v147.5c0 1.08-.63 2.59-1.4 3.35l-47.9 47.4a5.45 5.45 0 0 0-1.4 3.34c0 2.25.64 3.76 1.4 4.53l53.82 53.26c.77.76 1.76 1.39 2.19 1.39.43 0 .79.88.79 1.96v70.17c0 1.07-.89 1.96-1.97 1.96l-85.81-.04c-1.09 0-2.6.62-3.38 1.39l-1.55 1.54a5.52 5.52 0 0 1-3.38 1.4h-9.29"
/>
<path
stroke="#1F8C43"
d="M8 127.82v391.06a4.04 4.04 0 0 0 4 4.04L140.8 524"
/>
<path
stroke="#1AA5D0"
d="M894.01 374l49.8-49.44a5.52 5.52 0 0 1 3.37-1.4h92.41c1.09 0 2.6.63 3.38 1.4l27.18 26.99"
/>
<path
stroke="#1AA5D0"
d="M894.01 374l49.8-49.44a5.52 5.52 0 0 1 3.37-1.4h92.41c1.09 0 2.6.63 3.38 1.4l27.18 26.99"
/>
<path
stroke="#1F8C43"
d="M755.16 213.9l70.82.04c1.08 0 2.6-.63 3.37-1.4l91.61-90.97a5.52 5.52 0 0 1 3.37-1.39h77.07l-71.29-72.13a5.45 5.45 0 0 1-1.4-3.35V16.87"
/>
<path
stroke="#9DCA40"
d="M261.78-52.44l11.16 11.08c.77.77 1.4 2.28 1.4 3.35V-5L156.7 111.03l-85.4 84.8a5.45 5.45 0 0 0-1.4 3.35v100.67c0 1.08.89 1.96 1.97 1.96h50.4c1.09 0 1.98.88 1.98 1.96l.07 26.92c0 1.07.9 1.96 1.98 1.96l335.73.13c1.09 0 1.98.88 1.98 1.96v36.79l-42.99 43.78a5.52 5.52 0 0 1-3.37 1.4H385.2"
/>
<path
stroke="#DA5A98"
d="M564.8 549.64v17.76c0 1.08-.64 2.59-1.4 3.35L382.28 750.6a5.52 5.52 0 0 1-3.38 1.39h-109.1c-1.09 0-1.97.88-1.97 1.96v23.37c0 1.07-.9 1.96-1.98 1.96h-83.54c-1.08 0-1.97.88-1.97 1.96v45.8c0 1.07.89 1.95 1.97 1.95h29.89c1.08 0 1.97.88 1.97 1.96v51.07c0 1.08.63 2.59 1.4 3.35l10.32 10.25c.77.76 2.29 1.39 3.37 1.39h111.77c1.09 0 1.34.62.57 1.39M482.82 656H630.9"
/>
<path
stroke="#E5683E"
d="M440.53 245.87l-31.7 31.48a5.52 5.52 0 0 1-3.37 1.39h-62.37c-1.09 0-2.6.62-3.38 1.39l-2.68 3.66-264.59.02c-1.08 0-2.6-.63-3.37-1.4l-47.3-46.97a5.52 5.52 0 0 0-3.37-1.39h-57.47l-1.12-34.61c0-1.08-.63-2.59-1.4-3.35l-66.54-65.94"
/>
<path
stroke="#9F83B6"
d="M705.31 221.73h7.83c1.09 0 2.6.63 3.37 1.4l45.8 45.6c.78.76 1.4 2.27 1.4 3.35v13.94c0 1.08.46 1.96 1.03 1.98.56 0 1.03.9 1.03 1.98v10.77l-.15 110.84c0 1.08-.89 1.96-1.98 1.96H628.32c-1.08 0-2.6-.63-3.37-1.4l-12.2-12.12a5.52 5.52 0 0 0-3.38-1.39h-46.18a2 2 0 0 0-2 1.96l-.17 26.74c0 1.08-.63 2.59-1.4 3.35l-8.82 8.76a5.52 5.52 0 0 1-3.37 1.39l-26.65-.06c-1.09 0-2.6.62-3.38 1.39l-48.1 47.78a5.52 5.52 0 0 1-3.38 1.39h-16.37l-79.45-.02c-1.09 0-2.6.63-3.36 1.39L220.71 639.06a5.47 5.47 0 0 1-3.35 1.4H31.06"
/>
<path
stroke="#BC6D21"
d="M145.43 99.41L289.6 243.5c.77.76 2.29 1.39 3.37 1.39h146.76c1.09 0 2.6.62 3.38 1.39l31.93 31.71c.77.77 1.4 2.27 1.4 3.35V474.1c0 1.08-.63 2.59-1.4 3.35l-7.6 7.54a5.52 5.52 0 0 1-3.36 1.4h-20.62l-20.67 20.97-2.78 2.78L289.37 640a5.45 5.45 0 0 0-1.4 3.35l.16 177.85"
/>
<path
stroke="#DA1817"
d="M318.82 380.62h94.88c1.09 0 2.6.63 3.38 1.39l14.97 14.87c.77.76 2.29 1.39 3.37 1.39h72.99c1.08 0 2.6.63 3.35 1.39l58.57 58.53c.77.77 2.27 1.4 3.35 1.4h103.37c1.08 0 1.97-.89 1.97-1.97v-14.7c0-1.09-.89-1.97-1.97-1.97l-6.7.02H630.1a1.97 1.97 0 0 1-1.97-1.96v-57c0-1.08-.63-2.59-1.4-3.35l-14.58-14.48a5.45 5.45 0 0 1-1.4-3.35v-17.3c0-1.07-.63-2.58-1.4-3.34L597 327.92a5.52 5.52 0 0 0-3.37-1.39h-17.4c-1.09 0-2.6-.62-3.38-1.39l-41.8-41.5a5.52 5.52 0 0 0-3.37-1.4h-41.34"
/>
<path stroke="#9F9FA0" />
<path
stroke="#74BB63"
d="M855.2 194.4h59.84c1.09 0 1.97.89 1.97 1.96v28.74c0 1.08.64 2.59 1.4 3.35l50.96 50.6c.77.76 1.4 2.27 1.4 3.35v101.47l105.2 104.27"
/>
<path
stroke="#DA5A98"
d="M638.46 305.73L651 293.29c.77-.74.77-2 0-2.76l-31.35-31.13c-.76-.74-.76-2 0-2.76l18.53-18.4a5.52 5.52 0 0 1 3.37-1.39l160.41-.2 423.37 1.2c1.08 0 1.97.89 1.97 1.96v71.5"
/>
<path
stroke="#BC6D21"
d="M438.61 486.03h-18.54c-1.08 0-2.6-.63-3.37-1.4l-74.94-74.41a5.52 5.52 0 0 0-3.37-1.4h-38.57c-1.08 0-2.6-.62-3.37-1.38l-47-46.68-36.58-.04-57 71.59a5.45 5.45 0 0 0-1.4 3.35v23.9"
/>
<path
stroke="#74BB63"
d="M882.06 358.97l-46.92 46.6a5.52 5.52 0 0 1-3.38 1.39h-94.64c-1.09 0-2.6-.63-3.38-1.4l-30.6-30.33a5.52 5.52 0 0 0-3.36-1.4l-34.94.04c-1.08 0-2.6.63-3.37 1.4l-29.57 29.36a5.52 5.52 0 0 1-3.37 1.39l-14.55-14.35a5.63 5.63 0 0 0-3.42-1.4l-156.97-.25c-1.11 0-2.65.63-3.43 1.4l-27.85 27.61a5.52 5.52 0 0 1-3.38 1.4H-23.82l-88.65.2-12.44 12.35"
/>
<path
stroke="#2283BC"
d="M292.9 643.74l59.56-59.12a5.52 5.52 0 0 1 3.37-1.39h23.93c1.08 0 2.6-.63 3.37-1.39l46.53-46.21a5.52 5.52 0 0 1 3.38-1.4h33.53l153.67-.01c1.08 0 1.97-.88 1.97-1.96V420.01c0-1.07-.63-2.58-1.4-3.35l-38.64-38.37a5.45 5.45 0 0 1-1.4-3.35v-51.52c0-1.08-.64-2.59-1.4-3.35L468.91 210.39a5.52 5.52 0 0 0-3.38-1.4l-180.49.2"
/>
<path
stroke="#DA5A98"
d="M484.13 548.71h-37.09c-1.08 0-2.6.63-3.37 1.4l-69.02 68.54c-.77.76-.77 2 0 2.76l28.09 27.78c.77.76 2.29 1.39 3.37 1.39h62.41"
/>
<path
stroke="#31B495"
d="M520.82 561.7v-4.74c0-1.08-.89-1.96-1.98-1.96h-13.21c-1.09 0-2.6-.62-3.37-1.39l-43.36-42.88a5.45 5.45 0 0 1-1.4-3.35v-190.4c0-1.08.63-2.6 1.4-3.36l20.89-20.74a5.45 5.45 0 0 0 1.4-3.35v-95.4c0-1.08-.63-2.58-1.4-3.35L292.4 4.7l-.6-40.88c0-1.08-.62-2.58-1.4-3.35L278.8-51.07"
/>
<path
stroke="#1EB2D8"
d="M275.76 745h99.28c1.09 0 2.6-.63 3.38-1.4l174.33-172.75a5.52 5.52 0 0 1 3.38-1.4h46.75c1.08 0 2.6-.62 3.35-1.38l51.47-51.46a5.42 5.42 0 0 0 1.38-3.35V311.29c0-1.07-.63-2.58-1.4-3.35l-51.84-51.3a5.52 5.52 0 0 0-3.38-1.4h-17.95a1.97 1.97 0 0 1-1.97-1.95v-44.47c0-1.07-.89-1.96-1.97-1.96h-88.63a1.97 1.97 0 0 1-1.97-1.96v-19.2c0-1.07-.64-2.58-1.4-3.34L309.87 4.92"
/>
<path
stroke="#F4D21F"
d="M1002.65 123.83H926.5c-1.08 0-2.6.62-3.37 1.39l-92.28 91.46a5.52 5.52 0 0 1-3.37 1.39l-131.87-.08c-1.09 0-2.6.63-3.37 1.37l-51.9 51.19c-.77.76-.77 2 0 2.76l21.22 21.1c.77.76 1.4 2.27 1.4 3.35v15.69"
/>
<path
stroke="#BE2F39"
d="M672.51 437.64h54.25c1.08 0 2.6.63 3.37 1.4l49.04 48.7c.77.76 2.29 1.38 3.37 1.38h45.16c1.08 0 2.6-.62 3.37-1.39L914.39 405a5.52 5.52 0 0 1 3.37-1.4h42.22c1.08 0 2.6.63 3.37 1.4l100.8 100.1"
/>
<path
stroke="#E5683E"
d="M672.51 434.31h55.63c1.08 0 2.6.63 3.37 1.4l49.14 48.8c.77.76 2.29 1.38 3.37 1.38l41.9-.04c1.08 0 2.6-.62 3.37-1.39l62.08-61.68a5.45 5.45 0 0 0 1.4-3.35l-.1-268.18c0-1.08-.63-2.59-1.4-3.35l-99.8-99.28a5.52 5.52 0 0 0-3.37-1.39H422.62c-1.08 0-2.6.63-3.37 1.4L260.28 206.3a5.52 5.52 0 0 1-3.38 1.39H127.3c-1.08 0-2.6.62-3.37 1.39l-36.71 36.45a5.45 5.45 0 0 0-1.4 3.35v185.1"
/>
<path
stroke="#1EB2D8"
d="M410.1 713.73l17.53 17.42c.77.76 2.29 1.39 3.37 1.39h42.02c1.09 0 2.6-.63 3.37-1.4l26.02-25.83 123.2-.31"
/>
<path />
<path
stroke="#2283BC"
d="M307.34 907.08c.77-.77.52-1.4-.57-1.4H108.29a1.97 1.97 0 0 1-1.98-1.95V743.59c0-1.08.9-1.96 1.98-1.96h264.38c1.09 0 2.6-.63 3.38-1.4l23.75-23.58c.77-.76.77-2 0-2.76l-80.84-80.1c-.77-.76-.51-1.4.57-1.4h137.53c1.09 0 2.6-.62 3.38-1.38l53.63-53.26a5.52 5.52 0 0 1 3.37-1.4l88.57-.2c1.09 0 2.6-.62 3.38-1.38l55.6-55.22a5.45 5.45 0 0 0 1.4-3.35V409.93c0-1.08.9-1.96 1.98-1.96h29c1.08 0 2.6-.63 3.37-1.4l43.32-43.01a5.52 5.52 0 0 1 3.37-1.4h6.11c1.09 0 2.6-.62 3.38-1.38l53.12-52.76a5.52 5.52 0 0 1 3.37-1.39h13.6c1.08 0 2.6.63 3.37 1.4L892.79 370c.77.77 2.29 1.4 3.37 1.4h74.06c1.08 0 2.6.62 3.37 1.38l93.97 93.5"
/>
<path
stroke="#E6632A"
d="M647.56 429.46v-33.62c0-1.08-.63-2.59-1.4-3.35l-31.45-31.22a5.52 5.52 0 0 0-3.37-1.4h-36.87c-1.08 0-2.6.63-3.37 1.4l-74.35 73.83a5.52 5.52 0 0 1-3.37 1.39H440.9a1.97 1.97 0 0 1-1.98-1.96v-71.5c0-1.08-.88-1.96-1.97-1.96H9.3c-1.08 0-2.6.63-3.37 1.4l-37.9 37.62a5.52 5.52 0 0 1-3.37 1.4h-57c-1.1 0-2.61.62-3.38 1.38l-13.2 13.1a5.52 5.52 0 0 1-3.37 1.4h-13.2"
/>
<path
stroke="#F4D21F"
d="M219.9 357h144.49l76.54.13c1.08 0 1.97.88 1.97 1.96v71.7c0 1.08.89 1.96 1.97 1.96h46.36c1.08 0 2.6-.63 3.37-1.4l74.35-74a5.52 5.52 0 0 1 3.37-1.4h192.33c1.09 0 2.6-.62 3.37-1.38l43.58-43.28a5.52 5.52 0 0 1 3.37-1.39h10.6c1.08 0 2.6.63 3.37 1.4l62.65 62.2c.77.77 2.29 1.4 3.37 1.4h73.87c1.09 0 2.6.63 3.38 1.4l94.12 93.47 9.27.57c.84 0 2.17-.62 2.93-1.39l104.08-89.36a1.97 1.97 0 0 1 2.78 0l6.3 6.25"
/>
<path
stroke="#9DCA40"
d="M599.92 564.19a6.6 6.6 0 0 0 4.04-1.67l47.94-47.6a6.5 6.5 0 0 0 1.67-4.01V313.84c0-1.3-.75-3.1-1.67-4.02l-47.94-47.6a6.6 6.6 0 0 0-4.04-1.66h-97.84a6.6 6.6 0 0 0-4.05 1.66l-47.93 47.6a6.5 6.5 0 0 0-1.68 4.02v197.07c0 1.29.75 3.1 1.68 4.01l47.93 47.6a6.6 6.6 0 0 0 4.05 1.67h97.84z"
/>
<path
stroke="#1EB2D8"
d="M648.25 527.17v33.3c0 1.08-.63 2.58-1.4 3.35l-87.37 86.76c-.77.76-.51 1.39.57 1.39h70.82"
/>
<path
stroke="#BC6D21"
d="M476.04 273.32v-18.86c0-1.08-.63-2.59-1.4-3.35l-30.9-30.68a5.52 5.52 0 0 0-3.37-1.4H274.62"
/>
<path
stroke="#9F83B6"
d="M923.43 372.6V119.09c0-1.07-.64-2.58-1.4-3.34L757.4-47.74a5.52 5.52 0 0 0-3.37-1.39H351.57c-1.09 0-2.6.63-3.38 1.4L310.5-10.3"
/>
<path
stroke="#ED8E3F"
d="M317-49.77L304.42-37.3a5.58 5.58 0 0 0-1.42 3.35l-.36 21.45a5.3 5.3 0 0 0 1.36 3.35L493.36 178.9c.77.76 1.4 2.27 1.4 3.35v18.41c0 1.08.89 1.96 1.97 1.96h87.86c1.09 0 1.98.88 1.98 1.96v34.67c0 1.08.88 1.96 1.97 1.96h23.3c1.08 0 2.6.63 3.37 1.4l46.16 45.83c.77.77 1.4 2.28 1.4 3.35v138.64l.07 84.4c0 1.08-.63 2.6-1.38 3.35l-53.63 53.27a5.52 5.52 0 0 1-3.37 1.39H557.9c-1.08 0-2.6.63-3.37 1.39L380.57 746.98a5.52 5.52 0 0 1-3.38 1.39H112.47c-1.09 0-1.97.88-1.97 1.96v93.24c0 1.08-.9 1.96-1.98 1.96h-224.54"
/>
<path
stroke="#DA5A98"
d="M415.07 612.97l63.3-62.86a5.52 5.52 0 0 1 3.37-1.4h124.67c1.08 0 2.6-.6 3.37-1.37l28.23-27.83a5.35 5.35 0 0 0 1.4-3.33V478.2c0-1.07.89-1.96 1.97-1.96H694c1.09 0 1.97-.88 1.97-1.95v-52.11c0-1.08.64-2.59 1.4-3.35l29.57-29.37a5.45 5.45 0 0 0 1.4-3.35v-76c0-1.08.9-1.96 1.98-1.96h37.9a4 4 0 0 0 4-4v-29.3c0-1.08.63-2.59 1.4-3.35l35.35-35"
/>
<path
stroke="#1AA5D0"
d="M893.1 374.7L847.5 420a5.52 5.52 0 0 1-3.37 1.38H618.66c-1.09 0-2.6-.62-3.37-1.39l-81.65-81.08a5.52 5.52 0 0 0-3.37-1.39H384.49c-1.08 0-2.6.63-3.37 1.4l-17.14 17.02"
/>
<path
stroke="#55B549"
d="M288.52 640.2h-46.9c-1.09 0-1.98.88-1.98 1.95v26.65c0 1.07-.89 1.95-1.97 1.95h-89.32"
/>
<path
stroke="#D3C452"
d="M281.34 229.6l9.65 9.59c.77.76 2.29 1.39 3.37 1.39l146.76-.2c1.09 0 2.6.63 3.38 1.37l115.95 114c.77.76.77 1.99 0 2.75l-37.2 37.05a1.96 1.96 0 0 0 0 2.78l49.62 49.28c.77.77 2.3 1.4 3.38 1.4h138.28c1.08 0 2.6.62 3.37 1.39l37.26 37c.77.76 2.3 1.4 3.38 1.4h21.7"
/>
<path
stroke="#9DCA40"
d="M-116.02 841.87h216.77c1.09 0 1.97-.89 1.97-1.96v-99.83c0-1.08.9-1.96 1.98-1.96h266.24c1.08 0 2.6-.62 3.37-1.39l20.18-20.04c.77-.76.77-2.02 0-2.76l-78.7-78.2a5.45 5.45 0 0 1-1.4-3.35v-1.57c0-1.07.88-1.96 1.97-1.96l139.22.02c1.09 0 2.6-.62 3.38-1.39l53.7-53.48a4.86 4.86 0 0 1 2.8-1.39c.76 0 1.41-.88 1.41-1.96v-6.62"
/>
<path
stroke="#B00D7C"
d="M317.92 257.82l73.16 72.65c.77.77 1.4 2.27 1.4 3.35v45.25c0 1.08.63 2.59 1.4 3.35l12.02 11.93c.77.77 2.28 1.4 3.37 1.4h9.86c1.09 0 2.6-.63 3.38-1.4l6.29-6.25a5.52 5.52 0 0 1 3.37-1.39h85.81c1.08 0 2.6-.62 3.37-1.39l63.1-62.66a5.52 5.52 0 0 1 3.38-1.4h161.56c1.08 0 1.97.89 1.97 1.96v178.66c0 1.07-.63 2.58-1.4 3.35l-11.42 11.34a5.52 5.52 0 0 1-3.38 1.39H529.03a1.97 1.97 0 0 1-1.98-1.96v-73.07c0-1.07-.88-1.96-1.97-1.96h-88.26a1.97 1.97 0 0 1-1.97-1.95V406.5c0-1.08-.89-1.96-1.97-1.96-1.99 0-3.5-.63-4.28-1.4l-7.44-7.38"
/>
<path
stroke="#DA5A98"
d="M650.42-78.35v211.36c0 1.08.63 2.59 1.4 3.35l46.73 46.4c.77.77 1.4 2.28 1.4 3.36v35.79l-2.49-.14c-.75 0-1.97.63-2.74 1.4l-18.32 18.19a5.45 5.45 0 0 0-1.4 3.35v116.95c0 1.07.63 2.58 1.38 3.35l46.53 46.58a5.42 5.42 0 0 1 1.38 3.35l-.02 30.34c0 1.08-.63 2.59-1.4 3.35l-4.91 4.88a5.52 5.52 0 0 1-3.37 1.4H599.52c-1.08 0-1.97.87-1.97 1.95v36c0 1.08-.89 1.96-1.97 1.96h-92.71c-1.09 0-2.6.63-3.38 1.4l-19.58 19.45a5.52 5.52 0 0 1-3.38 1.39h-63.61"
/>
<path
stroke="#1EB2D8"
d="M281.48 745v84.33c0 1.08-.89 1.96-1.97 1.96h-57.48c-1.09 0-1.98.88-1.98 1.96v10.36c0 1.08-.88 1.96-1.97 1.96H110.52"
/>
<path
stroke="#F5C739"
d="M10.95 362.32l113.4 112.62c.78.77 2.3 1.4 3.38 1.4h36.12c1.08 0 2.6.62 3.37 1.38l205.45 204.03c.77.76 2.29 1.39 3.37 1.39l62.74.03h29.53c1.09 0 2.6.63 3.37 1.4l16.36 16.23c.77.77 2.29 1.4 3.37 1.4h134.34"
/>
<path
stroke="#31B495"
d="M275.82 590.44l24.44-24.27a5.52 5.52 0 0 1 3.37-1.4h121.52c1.08 0 2.6.63 3.37 1.4l34.32 34.08c.77.77 2.3 1.4 3.38 1.4h54.36"
/>
<path
stroke="#AD7D20"
d="M633.41 278.74l-21.36-21.22a5.45 5.45 0 0 1-1.4-3.35V-78.58"
/>
<path
stroke="#1F8C43"
d="M754.4 192.02v20.11c0 1.08-.9 1.96-1.98 1.96h-94.49c-1.08 0-2.6.63-3.37 1.4l-50.28 49.93a5.45 5.45 0 0 0-1.4 3.35v56.41c0 1.08.63 2.59 1.4 3.35l10.63 10.56c.77.76 1.4 2.27 1.4 3.35v121.45c0 1.08-.89 1.96-1.97 1.96H429.6c-1.08 0-2.6-.62-3.37-1.39l-21.2-21.06-15.77 14.8a5.52 5.52 0 0 1-3.37 1.38H282.15c-1.08 0-2.6.63-3.37 1.37l-62.1 61.3a5.5 5.5 0 0 1-3.37 1.37h-69.85c-1.09 0-2.6.63-3.37 1.4l-68.22 67.73a5.52 5.52 0 0 1-3.37 1.4H34.1c-1.09 0-2.6.62-3.38 1.38l-61.64 61.22a5.45 5.45 0 0 0-1.4 3.35v98.02c0 1.08-.89 1.96-1.97 1.96h-30.76c-1.08 0-2.6.63-3.37 1.4l-48.29 47.95"
/>
<path
stroke="#74BB63"
d="M184.55 422.03v34.09c0 1.07-.63 2.58-1.4 3.35l-56.48 55.88a5.52 5.52 0 0 1-3.37 1.4H-34.6"
/>
<path
stroke="#E5683E"
d="M980.12 416.59l-15.05-14.95a5.52 5.52 0 0 0-3.38-1.4h-46.04c-1.08 0-2.6.63-3.37 1.4l-14.5 14.4c-.77.76-1.4.5-1.4-.57v-34.93c0-1.08-.63-2.58-1.4-3.35l-2.48-2.47"
/>
<path
stroke="#DA5A98"
d="M826.77 238.25v54.43c0 1.08.63 2.59 1.4 3.35l86.38 85.78c.77.77 2.29 1.4 3.37 1.4h98.61c1.09 0 2.6-.63 3.36-1.4l22.6-22.8a5.47 5.47 0 0 1 3.36-1.39h106.38c1.08 0 1.97-.88 1.97-1.96l.04-95.24c0-1.08.89-1.96 1.97-1.96h39.02c1.09 0 1.97.88 1.97 1.96v48.1"
/>
<path
stroke="#E6632A"
d="M12.87 361.05h-5c-1.1 0-2.61-.63-3.38-1.4l-17.72-17.58a5.52 5.52 0 0 0-3.37-1.4h-16.9c-1.09 0-2.6-.62-3.38-1.38l-55.64-55.26a5.52 5.52 0 0 0-3.38-1.4h-15.19"
/>
<path
stroke="#3EB373"
d="M959.23 126.08l19.2 19.06c.76.76 2.28 1.39 3.36 1.39h177.42c1.09 0 1.97.88 1.97 1.96v100.84a3 3 0 0 0 3 3h36.42c1.08 0 1.97.88 1.97 1.96v54.65"
/>
<path
stroke="#2765B0"
d="M33.17 798.75h242.12c1.08 0 1.97-.88 1.97-1.96V672.9c0-1.08-.89-1.96-1.97-1.96h-30.12a1.97 1.97 0 0 1-1.98-1.96v-26.76c0-1.07-.88-1.96-1.97-1.96h-20.87"
/>
<path
stroke="#EB9D12"
d="M458.48 496.1h9.55c1.09 0 2.6-.63 3.37-1.4l48.23-47.83a5.52 5.52 0 0 1 3.38-1.39h24.26c1.08 0 2.6.63 3.37 1.39l23.26 23.1c.77.76 2.29 1.39 3.37 1.39h111.06c1.09 0 1.97-.88 1.97-1.96v-54.46c0-1.08-.63-2.59-1.4-3.33l-20.35-20.04-2.8-2.76-1.17-1.16a5.52 5.52 0 0 0-3.37-1.39h-11.66a1.97 1.97 0 0 1-1.97-1.96V310.6c0-1.08.88-1.96 1.97-1.96h77.38"
/>
<path
stroke="#9DCA40"
d="M-34.94 402.19v111.19c0 1.07.63 2.58 1.4 3.35l49.06 48.71c.76.77 2.28 1.4 3.37 1.4h21.8c1.08 0 2.6.62 3.37 1.39l113 112.22c.78.77 2.3 1.4 3.38 1.4h170.6c1.08 0 1.97.87 1.97 1.95v60.41"
/>
</g>
</svg>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #0f0f0f;
}
.anim,
.anim svg {
position: relative;
width: 100%;
height: 100%;
}
.anim path {
stroke-width: 2;
}
</style>
src/modules/page9/element/TextVue.vue 0 → 100644
View file @ cc5d4896
<!--
* 测试
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';
onMounted(() => {
anime({
targets: '.box1',
left: '240px',
backgroundColor: '#000',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad',
});
let path = anime.path('path');
anime({
targets: '.el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: false,
});
});
</script>
<template>
<div>
<div class="box1"></div>
<div class="text-svg">
<div class="el"></div>
<svg
t="1652088790468"
class="icon"
viewBox="0 0 1067 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1324"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="520.99609375"
height="500"
>
<path
d="M43.389831 980.610169V173.559322c0-71.59322 58.576271-130.169492 130.169491-130.169491h720.271186c71.59322 0 130.169492 58.576271 130.169492 130.169491v807.050847H43.389831z"
fill="#94D6D0"
p-id="1325"
></path>
<path
d="M43.389831 251.661017h980.610169v728.949152H43.389831z"
fill="#F0F0FF"
p-id="1326"
></path>
<path
d="M648.647593 521.719322l91.118644-60.745763-50.267118-31.678915-56.40678 394.847458 64.433898 9.207322 56.40678-394.847458 10.292068-72.053152-60.559187 40.374237-91.118644 60.745763zM305.173695 592.271186h199.59322v65.084746h-199.59322z"
fill="#ABABD1"
p-id="1327"
></path>
<path
d="M372.427932 514.169492h65.084746v221.288135h-65.084746z"
fill="#ABABD1"
p-id="1328"
></path>
<path
d="M43.389831 922.033898h980.610169V980.610169H43.389831z"
fill="#6E6E96"
opacity=".07"
p-id="1329"
></path>
<path
d="M379.661017 43.389831h333.377085v208.271186H379.661017z"
fill="#FFE95F"
p-id="1330"
></path>
<path
d="M1024 173.559322c0-71.59322-58.576271-130.169492-130.169492-130.169491h-210.440677v208.271186H1024V173.559322z"
fill="#FF9780"
p-id="1331"
></path>
<path
d="M43.389831 208.813559h980.610169v83.525424H43.389831z"
fill="#6E6E96"
opacity=".15"
p-id="1332"
></path>
</svg>
</div>
<div class="text-router"></div>
</div>
</template>
<style lang="scss" scoped>
.box1 {
left: 0;
position: relative;
width: 100px;
height: 100px;
background-color: pink;
}
.text-svg {
position: relative;
margin-bottom: 40px;
.el {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: pink;
}
}
.text-router {
box-sizing: border-box;
width: 500px;
height: 500px;
background-color: rgb(192, 230, 255);
position: relative;
}
</style>
src/modules/page9/element/TransformationAnimation.vue 0 → 100644
View file @ cc5d4896
<!--
* 变形动画
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';
const containerRef = ref<any>(null);
onMounted(() => {
for (let i = 1; i <= 100; i++) {
const dot = document.createElement('div');
dot.classList.add('element');
containerRef.value.appendChild(dot);
}
const dotAll = document.querySelectorAll('.element');
const animation = anime.timeline({
targets: dotAll,
easing: 'easeInOutExpo',
delay: anime.stagger(100, { grid: [10, 10], from: 'center' }),
loop: true,
});
animation
.add({
rotateZ: 180,
translateY: anime.stagger(-20, {
grid: [10, 10],
from: 'center',
axis: 'y',
}),
translateX: anime.stagger(-20, {
grid: [10, 10],
from: 'center',
axis: 'x',
}),
opacity: 1,
})
.add({
borderRadius: 50,
})
.add({
scale: 0.2,
opacity: 0.2,
})
.add({
rotateZ: 180,
translateY: anime.stagger(0, {
grid: [10, 10],
from: 'center',
axis: 'y',
}),
translateX: anime.stagger(0, {
grid: [10, 10],
from: 'center',
axis: 'x',
}),
opacity: 1,
})
.add({
scale: 1,
borderRadius: 0,
})
.add({
rotateZ: -90,
});
});
</script>
<template>
<div class="box">
<div class="container" ref="containerRef"></div>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:deep(.container .element) {
position: relative;
width: 40px;
height: 40px;
background-color: #fff;
scale: 0.75;
}
.box {
width: 100%;
height: 100%;
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
min-width: 400px;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
</style>
src/modules/page9/element/WorkingDigitalClock .vue 0 → 100644
View file @ cc5d4896
<!--
* 时钟
-->
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
const hoursRef = ref<any>(null);
const minutesRef = ref<any>(null);
const secondsRef = ref<any>(null);
const ampmRef = ref<any>(null);
const hhRef = ref<any>(null);
const mmRef = ref<any>(null);
const ssRef = ref<any>(null);
const hrDotRef = ref<any>(null);
const minDotRef = ref<any>(null);
const secDotRef = ref<any>(null);
const hours = ref<any>(0);
const minutes = ref<any>(0);
const seconds = ref<any>(0);
const ampm = ref('');
const timer = ref<any>(null);
onMounted(() => {
getTime();
});
onBeforeUnmount(() => {
clearTimeout(timer.value);
timer.value = null;
});
function getTime() {
let h = new Date().getHours() as any;
let m = new Date().getMinutes() as any;
let s = new Date().getSeconds() as any;
let am = h >= 12 ? 'PM' : 'AM';
if (h > 12) {
h = h - 12;
}
if (h < 10) {
h = '0' + h;
}
if (m < 10) {
m = '0' + m;
}
if (s < 10) {
s = '0' + s;
}
hours.value = h;
minutes.value = m;
seconds.value = s;
ampm.value = am;
hhRef.value.style.strokeDashoffset = 440 - (440 * h) / 12;
mmRef.value.style.strokeDashoffset = 440 - (440 * m) / 60;
ssRef.value.style.strokeDashoffset = 440 - (440 * s) / 60;
// 360/12 = 30
hrDotRef.value.style.transform = `rotate(${h * 30}deg)`;
// 360/60 = 6
minDotRef.value.style.transform = `rotate(${m * 6}deg)`;
// 360/60 = 6
secDotRef.value.style.transform = `rotate(${s * 6}deg)`;
timer.value = setTimeout(() => {
getTime();
}, 1000);
}
</script>
<template>
<div class="fit box">
<div ref="timeRef" id="time">
<div class="circle" style="--clr: #ff2971">
<div class="dots" ref="hrDotRef"></div>
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="hh" ref="hhRef"></circle>
</svg>
<div id="hours" ref="hoursRef">
{{ hours }} <br /><span>Hours</span>
</div>
</div>
<div class="circle" style="--clr: #fee800">
<div class="dots" ref="minDotRef"></div>
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="mm" ref="mmRef"></circle>
</svg>
<div id="minutes" ref="minutesRef">
{{ minutes }} <br /><span>Minutes</span>
</div>
</div>
<div class="circle" style="--clr: #04fc43">
<div class="dots" ref="secDotRef"></div>
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="ss" ref="ssRef"></circle>
</svg>
<div id="seconds" ref="secondsRef">
{{ seconds }} <br /><span>Seconds</span>
</div>
</div>
<div class="ap">
<div id="ampm" ref="ampmRef">{{ ampm }}</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
display: flex;
justify-content: center;
align-items: center;
background-color: #2f363e;
}
#time {
display: flex;
gap: 40px;
color: #fff;
.circle {
position: relative;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
svg {
position: relative;
width: 150px;
height: 150px;
transform: rotate(270deg);
circle {
width: 100%;
height: 100%;
fill: transparent;
stroke: #191919;
stroke-width: 4;
transform: translate(5px, 5px);
&:nth-child(2) {
stroke: var(--clr);
stroke-dasharray: 440;
}
}
}
.dots {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
justify-content: center;
&::before {
position: absolute;
content: '';
top: -3px;
width: 15px;
height: 15px;
background-color: var(--clr);
border-radius: 50%;
box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
}
}
}
div {
position: absolute;
text-align: center;
font-weight: 500;
font-size: 1.5em;
span {
position: absolute;
font-size: 0.35em;
font-weight: 300;
letter-spacing: 0.1em;
transform: translateX(-50%);
text-transform: uppercase;
}
}
.ap {
position: relative;
font-size: 1em;
transform: translateX(-20px);
}
}
</style>
src/router/routes.ts
View file @ cc5d4896
......@@ -92,6 +92,16 @@ const routes: RouteRecordRaw[] = [
keepalive: true,
},
},
{
path: 'page9',
name: 'PAGE9',
component: () => import('../modules/page9/IndexPage.vue'),
meta: {
title: '动画2',
permission: ['*'],
keepalive: true,
},
},
],
},
],
......
src/types/index.d.ts 0 → 100644
View file @ cc5d4896
declare module 'animejs/lib/anime.es.js';
declare module 'swiper/bundle';
yarn.lock
View file @ cc5d4896
......@@ -1826,6 +1826,11 @@
"require-from-string" "^2.0.2"
"uri-js" "^4.2.2"
"animejs@^3.2.1":
"integrity" "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
"resolved" "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz"
"version" "3.2.1"
"ansi-escapes@^4.2.1", "ansi-escapes@^4.3.0":
"integrity" "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="
"resolved" "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
......@@ -3443,6 +3448,16 @@
"resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
"version" "4.2.10"
"gsap@^2.0.2":
"integrity" "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
"resolved" "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz"
"version" "2.1.3"
"gsap@^3.11.3":
"integrity" "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
"resolved" "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz"
"version" "3.11.3"
"gzip-size@^6.0.0":
"integrity" "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="
"resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
......@@ -3499,6 +3514,14 @@
"resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
"version" "1.2.0"
"hover-effect@^1.1.0":
"integrity" "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg=="
"resolved" "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz"
"version" "1.1.0"
dependencies:
"gsap" "^2.0.2"
"three" "^0.99.0"
"hpack.js@^2.1.6":
"integrity" "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ=="
"resolved" "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
......@@ -5675,6 +5698,16 @@
"resolved" "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
"version" "0.2.0"
"three@^0.147.0":
"integrity" "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
"resolved" "https://registry.npmjs.org/three/-/three-0.147.0.tgz"
"version" "0.147.0"
"three@^0.99.0":
"integrity" "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
"resolved" "https://registry.npmjs.org/three/-/three-0.99.0.tgz"
"version" "0.99.0"
"through@^2.3.6":
"integrity" "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
"resolved" "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment