├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Magic-Card
2 | beartfull card with css
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | magic card
9 |
10 |
11 |
12 | Magic Card
13 |
14 |
15 | Mythrill
16 |
17 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @property --rotate {
2 | syntax: "";
3 | initial-value: 132deg;
4 | inherits: false;
5 | }
6 |
7 | :root {
8 | --card-height: 65vh;
9 | --card-width: calc(var(--card-height) / 1.5);
10 | }
11 |
12 |
13 | body {
14 | min-height: 100vh;
15 | background: #212534;
16 | display: flex;
17 | align-items: center;
18 | flex-direction: column;
19 | padding-top: 2rem;
20 | padding-bottom: 2rem;
21 | box-sizing: border-box;
22 | }
23 |
24 |
25 | .card {
26 | background: #191c29;
27 | width: var(--card-width);
28 | height: var(--card-height);
29 | padding: 3px;
30 | position: relative;
31 | border-radius: 6px;
32 | justify-content: center;
33 | align-items: center;
34 | text-align: center;
35 | display: flex;
36 | font-size: 1.5em;
37 | color: rgb(88 199 250 / 0%);
38 | cursor: pointer;
39 | font-family: cursive;
40 | }
41 |
42 | .card:hover {
43 | color: rgb(88 199 250 / 100%);
44 | transition: color 1s;
45 | }
46 | .card:hover:before, .card:hover:after {
47 | animation: none;
48 | opacity: 0;
49 | }
50 |
51 |
52 | .card::before {
53 | content: "";
54 | width: 104%;
55 | height: 102%;
56 | border-radius: 8px;
57 | background-image: linear-gradient(
58 | var(--rotate)
59 | , #5ddcff, #3c67e3 43%, #4e00c2);
60 | position: absolute;
61 | z-index: -1;
62 | top: -1%;
63 | left: -2%;
64 | animation: spin 2.5s linear infinite;
65 | }
66 |
67 | .card::after {
68 | position: absolute;
69 | content: "";
70 | top: calc(var(--card-height) / 6);
71 | left: 0;
72 | right: 0;
73 | z-index: -1;
74 | height: 100%;
75 | width: 100%;
76 | margin: 0 auto;
77 | transform: scale(0.8);
78 | filter: blur(calc(var(--card-height) / 6));
79 | background-image: linear-gradient(
80 | var(--rotate)
81 | , #5ddcff, #3c67e3 43%, #4e00c2);
82 | opacity: 1;
83 | transition: opacity .5s;
84 | animation: spin 2.5s linear infinite;
85 | }
86 |
87 | @keyframes spin {
88 | 0% {
89 | --rotate: 0deg;
90 | }
91 | 100% {
92 | --rotate: 360deg;
93 | }
94 | }
95 |
96 | a {
97 | color: #212534;
98 | text-decoration: none;
99 | font-family: sans-serif;
100 | font-weight: bold;
101 | margin-top: 2rem;
102 | }
--------------------------------------------------------------------------------