├── README.md
├── css
    └── index.css
├── glassBall.html
├── index.html
└── js
    └── index.js


/README.md:
--------------------------------------------------------------------------------
1 | "# graph-animation-css" 
2 | ![Screenshot (18)](https://user-images.githubusercontent.com/86121130/211311395-c6c6329a-4e53-4c24-8da5-de2bb09214f2.png)
3 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | .body {
  8 |     display: flex;
  9 |     justify-content: space-around;
 10 |     align-items: center;
 11 |     min-height: 90vh;
 12 |     background: #050505;
 13 |     overflow: hidden;
 14 | }
 15 | 
 16 | 
 17 | .cube {
 18 |     position: relative;
 19 |     width: 300px;
 20 |     height: 300px;
 21 |     transform-style: preserve-3d;
 22 |     transform: rotateX(-90deg);
 23 |     animation: animate 4s linear infinite;
 24 |     z-index: 0;
 25 | }
 26 | 
 27 | .cube div {
 28 |     position: absolute;
 29 |     top: 0;
 30 |     left: 0;
 31 |     width: 100%;
 32 |     height: 100%;
 33 |     transform-style: preserve-3d;
 34 | }
 35 | 
 36 | 
 37 | .cube div span {
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     width: 100%;
 42 |     height: 100%;
 43 |     background: linear-gradient(#151515, #00ec00);
 44 |     transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
 45 | }
 46 | 
 47 | .top {
 48 |     position: absolute;
 49 |     top: 0;
 50 |     left: 0;
 51 |     width: 300px;
 52 |     height: 300px;
 53 |     background: linear-gradient(#151515, #00ec00);
 54 |     transform: rotateX(90deg) translateZ(150px);
 55 | }
 56 | 
 57 | .top::before {
 58 |     content: '';
 59 |     position: absolute;
 60 |     top: 0;
 61 |     left: 0;
 62 |     width: 300px;
 63 |     height: 300px;
 64 |     background: #0f0;
 65 |     transform: translateZ(-360px);
 66 |     filter: blur(20px);
 67 |     box-shadow: 0 0 75px rgba(0, 255, 0, 0.2),
 68 |         0 0 75px rgba(0, 255, 0, 0.4),
 69 |         0 0 75px rgba(0, 255, 0, 0.6),
 70 |         0 0 75px rgba(0, 255, 0, 0.8),
 71 |         0 0 75px rgba(0, 255, 0, 1);
 72 | }
 73 | 
 74 | nav {
 75 |     width: 100%;
 76 |     position: absolute;
 77 |     padding: 1rem;
 78 |     /* position:fixed; */
 79 |     top: 0;
 80 |     background: rgb(65, 64, 64);
 81 | }
 82 | 
 83 | nav div {
 84 |     display: flex;
 85 |     justify-content: space-between;
 86 |     align-items: center;
 87 | }
 88 | 
 89 | nav div h1 {
 90 |     color: #fff;
 91 | }
 92 | 
 93 | nav div ul {
 94 |     display: flex;
 95 |     justify-content: center;
 96 |     align-items: center;
 97 |     z-index: 100px;
 98 | }
 99 | 
100 | nav div ul li,
101 | a {
102 |     color: #fff;
103 |     list-style-type: none;
104 |     padding-right: 1rem;
105 |     text-decoration: none;
106 | }
107 | 
108 | .footer {
109 |     height: 50vh;
110 |     background: rgb(124, 124, 124);
111 | }
112 | 
113 | @keyframes animate {
114 |     0% {
115 |         transform: rotateX(-30deg) rotateY(0deg);
116 |     }
117 | 
118 |     100% {
119 |         transform: rotateX(-30deg) rotateY(360deg);
120 |     }
121 | }
122 | 
123 | 
124 | /* glass Ball  */
125 | 
126 | .container {
127 |     display: flex;
128 |     justify-content: space-around;
129 |     align-items: center;
130 |     min-height: 100vh;
131 |     background: #132730;
132 | }
133 | 
134 | .ball{
135 |     position: relative;
136 |     width: 300px;
137 |     height: 300px;
138 |     box-shadow: inset 0 25px 70px rgba(255, 255, 255, .45);
139 |     border-radius: 50%;
140 |     display: flex;
141 |     justify-content: center;
142 |     align-items: center;
143 | }
144 | 
145 | .ball::before {
146 |     content: '';
147 |     position: absolute;
148 |     bottom: -70px;
149 |     width: 100%;
150 |     height: 100px;
151 |     border-radius: 50%;
152 |     background: radial-gradient(#0003, #0003, transparent, transparent);
153 |     z-index: -1;
154 | }
155 | .call{
156 |     width: 200px;
157 |     height: 200px;
158 |     box-shadow: inset 0 -50px 40px 20px rgba(255, 255, 255, 0.7);
159 |     border-radius: 50%;
160 | }
161 | .ball::after {
162 |     content: '';
163 |     position: absolute;
164 |     top: 0;
165 |     left: 0;
166 |     width: 15px;
167 |     height: 15px;
168 |     background: var(--clr);
169 |     border-radius: 50%;
170 |     box-shadow:0 0 20px var(--clr),
171 |         0 0 60px var(--clr),
172 | 
173 |         40px -70px 0 var(--clr),
174 |         40px -70px 20px var(--clr),
175 | 
176 |         70px -70px 0 var(--clr),
177 |         70px -70px 20px var(--clr),
178 | 
179 |         -70px -150px 0 var(--clr),
180 |         -70px -150px 20px var(--clr),
181 |         animation:animate 10s linear infinite;
182 | }
183 | 
184 | .dad{
185 |     position: relative;
186 |     width: 200px;
187 |     height: 200px;
188 |     box-shadow: inset 20px 60px 30px 20px rgba(255,255,255,0.3);
189 |     border-radius:50%;
190 | }


--------------------------------------------------------------------------------
/glassBall.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>MustaDev</title>
 8 |     <link rel="stylesheet" href="./css/index.css">
 9 | </head>
10 | <body>
11 |     <div>
12 |         <nav>
13 |             <div>
14 |              <h1>Designer</h1>
15 |              <ul>
16 |                  <li><a href="index.html">Home</a></li>
17 |                  <li><a href="glassBall.html">GlassBall</a></li>
18 |                  <li>Contact</li>
19 |                  <li>About</li>
20 |              </ul>
21 |             </div>
22 |          </nav>
23 |     </div>
24 |     <div class="container">
25 |         <div class="ball">
26 |             <div class="circle" style="--clr:#04fc43;"></div>
27 |             <div class="circle" style="--clr:#fee800;"></div>
28 |             <div class="circle" style="--clr:#ff2972;"></div>
29 |             <div class="circle" style="--clr:#03a9f4;"></div>
30 |         </div>
31 |         <div class="dad"></div>
32 |         <div class="call"></div>
33 |     </div>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>MustaDev Design</title>
 8 |     <link rel="stylesheet" href="./css/index.css">
 9 | </head>
10 | <body>
11 |     <div>
12 |         <nav>
13 |             <div>
14 |              <h1>Designer</h1>
15 |              <ul>
16 |                 <li><a href="index.html">Home</a></li>
17 |                 <li><a href="glassBall.html">GlassBall</a></li>
18 |                  <li>Contact</li>
19 |                  <li>About</li>
20 |              </ul>
21 |             </div>
22 |          </nav>
23 |     </div>
24 |    <div class="body">
25 |     <div class="cube">
26 |         <div>
27 |             <div class="top"></div>
28 |             <span style="--i:0;"></span>
29 |             <span style="--i:1;"></span>
30 |             <span style="--i:2;"></span>
31 |             <span style="--i:3;"></span>
32 |         </div>
33 |     </div>
34 |     <div class="cube">
35 |         <div>
36 |             <div class="top"></div>
37 |             <span style="--i:0;"></span>
38 |             <span style="--i:1;"></span>
39 |             <span style="--i:2;"></span>
40 |             <span style="--i:3;"></span>
41 |         </div>
42 |     </div>
43 |    </div>
44 | 
45 |    <footer class="footer">
46 | 
47 |    </footer>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jadoiconic/graph-animation-css/de215c47cf0072e45bab68f2a9553b990f4e00bd/js/index.js


--------------------------------------------------------------------------------