krkd.eco.coding/index.html at master · duruduru/krkd.eco.coding · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pokeball</title>

        <style>
            .container {
                margin-top: 60px;
            }

            .pokeball {
                box-sizing: border-box;
                --pokeball-size: 250px;
                --pokeball-inner-size: 80px;
                --pokeball-border-size: 10px;

                --before-diameter: var(--pokeball-inner-size);
                --after-diameter: calc(var(--before-diameter) - (var(--pokeball-border-size) * 3));

                border: var(--pokeball-border-size) solid #262122;
                width: var(--pokeball-size);
                height: var(--pokeball-size);
                border-radius: 100%;
                margin: 0 auto;
                position: relative;

                background: linear-gradient(
                    150deg,
                    #BA0C2F 0%,
                    #BA0C2F 44%,
                    #262122 44%,
                    #262122 56%,
                    #fff 56%,
                    #fff 100%
                );
            }

            .pokeball:before,
            .pokeball:after {
                content: " ";
                border-radius: 100%;
                display: block;
                position: absolute;
            }

            .pokeball:before {
                width: var(--before-diameter);
                height: var(--before-diameter);
                top: calc(50% - var(--before-diameter) / 2);
                left: calc(50% - var(--before-diameter) / 2);
                background: #262122;
            }

            .pokeball:after {
                width: var(--after-diameter);
                height: var(--after-diameter);

                top: calc(50% - ((var(--after-diameter) / 2) + var(--pokeball-border-size)));
                left: calc(50% - ((var(--after-diameter) / 2) + var(--pokeball-border-size)));

                background: #fff;
                border: double var(--pokeball-border-size) #262122;
            }

            .pokeball-animated {
                animation-duration: 1s;
                animation-fill-mode: both;
                animation-iteration-count: infinite;
                animation-name: shake;
            }

            @keyframes shake {
                from {
                    transform: none;
                }

                20% {
                    transform: translate3d(-20%, 0, 0) rotate3d(0, 0, 1, -10deg);
                }

                40% {
                    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 5deg);
                }

                50% {
                    transform: translate3d(-10%, 0, 0) rotate3d(0, 0, 1, -10deg);
                }

                60% {
                    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 5deg);
                }

                to {
                    transform: none;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="pokeball pokeball-animated"></div>
        </div>
    </body>
</html>