|
20 | 20 | width: 300px; |
21 | 21 | height: 300px; |
22 | 22 | position: relative; |
23 | | - transform-style: preserve-3d; |
24 | | - animation: rotate 20s linear infinite; |
25 | 23 | } |
26 | 24 |
|
27 | 25 | .globe { |
|
31 | 29 | position: absolute; |
32 | 30 | transform-style: preserve-3d; |
33 | 31 | background: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg'); |
34 | | - background-size: cover; |
35 | | - overflow: hidden; |
36 | | - } |
37 | | - |
38 | | - .globe::before { |
39 | | - content: ''; |
40 | | - position: absolute; |
41 | | - top: 0; |
42 | | - left: 0; |
43 | | - width: 100%; |
44 | | - height: 100%; |
45 | | - border-radius: 50%; |
46 | | - background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 70%); |
47 | | - animation: dayNightCycle 20s linear infinite; |
| 32 | + background-size: 200% 150%; |
| 33 | + animation: spin 20s linear infinite; |
| 34 | + box-shadow: |
| 35 | + inset 30px 0 80px rgba(0, 0, 0, 0.8), |
| 36 | + inset -30px 0 40px rgba(255, 255, 255, 0.2), |
| 37 | + 0 0 40px rgba(168, 219, 255, 0.4); |
48 | 38 | } |
49 | 39 |
|
50 | 40 | .globe::after { |
51 | | - content: ''; |
| 41 | + content: ""; |
52 | 42 | position: absolute; |
53 | | - width: 100%; |
54 | | - height: 100%; |
| 43 | + inset: 0; |
55 | 44 | border-radius: 50%; |
56 | | - background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1), rgba(0,0,0,0.6)); |
| 45 | + background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(0,0,0,0.7) 70%); |
57 | 46 | mix-blend-mode: overlay; |
58 | | - opacity: 0.5; |
59 | | - animation: shadowMovement 20s linear infinite; |
60 | 47 | } |
61 | 48 |
|
62 | | - @keyframes rotate { |
63 | | - 0% { transform: rotateY(0deg); } |
64 | | - 100% { transform: rotateY(360deg); } |
| 49 | + @keyframes spin { |
| 50 | + 0% { background-position: 0 0; } |
| 51 | + 100% { background-position: -200% 0; } |
65 | 52 | } |
66 | 53 |
|
67 | 54 | @keyframes dayNightCycle { |
|
0 commit comments