SolarSystemv3.github.io/Rotating_earth.html at master · Alexledev/SolarSystemv3.github.io · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title> rotating earth </title>
        <style>
            #earth {
                    /* [1] Allow it to contain the absolutely positions pseudo-elements (later-on) */
                    position: relative;

                    /* [2] Set-up the dimensions and spacing */
                    width: 300px;
                    height: 300px;
                    margin: 3em auto;

                    /* [3] Prepare the animation effects */
                    transition: transform 200ms linear;
                    animation: rotate 4s linear infinite; /* This is going to be defined in the next step */

                    /* [4] Tweak the appearance, and give it a nice background i.e. the world map */
                    color: #000;
                    border-radius: 50%;
                    background: url(Earth_map.jpg) 0 0 repeat / 630px;
                    box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);

                    /* [5] Position things in a 3d space */
                    transform-style: preserve-3d;
                    }

            #earth:after {
                /* [1] Break the flow to show this as an overlay */
                position: absolute;
                top: 0;
                left: 0;

                /* [2] Make it take all the space available in the box (ahem... globe!) */
                width: 100%;
                height: 100%;

                /* [3] Make sure this has no generated content, as we want this just for fancy purposes */
                content: '';

                /* [4] Give it some shape and shadow */
                border-radius: 50%;
                box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
                }

            #earth:before {
            /* [1] Again, break the flow to show this as an overlay */
            position: absolute;
            top: 0;
            left: 0;

            /* [2] Again, give it all the available space */
            width: 100%;
            height: 100%;

            /* [3] Duh. */
            content: '';

            /* [4] Add some shape and overlay effect to it */
            opacity: .2;
            border-radius: 50%;
            background: radial-gradient(circle at 100px 100px, #fff, #000);
            }

            @keyframes rotate {
            0% {background-position: 0 0;}
            100% {background-position: 630px 0;}
            }
        </style>
    </head>
    <body>
        <div id="earth"></div>
    </body>
</html>