1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!--
* 动画
* 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 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">
<div class="row wrap items-center">
<div class="my-card">
<loading-circle />
</div>
<div class="my-card">
<button-hover />
</div>
<div class="my-card" style="width: 600px">
<Text3D />
</div>
<div class="column items-center">
<div class="my-card" style="width: 460px; height: 160px">
<!-- <lighted-text /> -->
这个有点儿卡
</div>
<div class="my-card" style="height: 140px">
<typewriters-text />
</div>
</div>
<div class="my-card" style="width: 680px; height: 360px">
<Rotate3D />
</div>
<div class="my-card">
<boder-animation />
</div>
<div class="my-card" style="width: 500px">
<range-slider />
</div>
<div class="my-card" style="width: 480px">
<search-input />
</div>
<div class="my-card" style="width: 540px">
<magic-menu-indicator />
</div>
<div class="row no-wrap">
<div class="my-card" style="height: 500px">
<drop-down-menu />
</div>
<div class="my-card" style="width: 900px; height: 500px">
<swiper-card />
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
padding: $padding-sm;
}
.my-card {
margin: $padding-sm;
width: 380px;
height: 240px;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
scale: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.5s;
&:hover {
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
// scale: 1.1;
z-index: 99;
}
}
</style>