100daysCSS/day76.html at main · danbodev/100daysCSS · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DAY 76 | CSS CHALLENGE</title>

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    main {
      display: grid;
      place-items: center;
      min-height: 100vh;
      overflow: hidden;
    }

    .frame {
      background-color: #F6F7BD;
      width: 300px;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem;
      box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
    }

    .growing {
      width: 150px;
      height: 150px;
      position: relative;
      clip-path: inset(-100vh 0);
      zoom: 1.5;
    }

    .growing:before {
      content: "";
      display: block;
      width: 400%;
      height: 100%;
      background:
        /*1*/
        radial-gradient(farthest-side, #639510 97%, #0000) 12.5% 65%/12px 9px,
        linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
        linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,
        /*2*/
        radial-gradient(farthest-side, #639510 97%, #0000) 35.5% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 38% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
        linear-gradient(#639510 0 0) 37% 100%/5px 52%,
        /*3*/
        radial-gradient(farthest-side, #fb3e4c 98%, #0000) 64.5% 40.5%/10px 9px,
        radial-gradient(farthest-side at bottom, #0000 calc(100% - 5px), #639510 0 100%, #0000)63.6% 34%/20px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 61% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 63.5% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
        linear-gradient(#639510 0 0) 62% 100%/5px 62%,
        /*4*/
        radial-gradient(farthest-side at 50% 4px, #fb3e4c 98%, #0000) 88.1% 17.5%/17px 13px,
        radial-gradient(farthest-side, #639510 97%, #0000) 87% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 89.5% 38%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 89.5% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
        linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
      background-repeat: no-repeat;
      animation: growing-m 4s .5s both;
    }

    .growing:after {
      content: "";
      position: absolute;
      inset: -100vh 49px 42px 54px;
      background:
        conic-gradient(at 2px 50%, #0000 270deg, #fff 0)0 0/8px 10px,
        conic-gradient(at 2px 50%, #0000 270deg, #fff 0)4px 5px/8px 10px;
      animation: growing-s 4s .5s both;
    }

    @keyframes growing-m {

      0%,
      20% {
        transform: translate(0%)
      }

      33.33%,
      53.33% {
        transform: translate(-24%)
      }

      66.66%,
      86.66% {
        transform: translate(-49.5%)
      }

      100% {
        transform: translate(-74.5%)
      }
    }

    @keyframes growing-s {
      0% {
        inset: -100vh 49px 100vh 54px
      }

      10% {
        inset: -100vh 49px 42px 54px;
        opacity: 1
      }

      20% {
        inset: -100vh 49px 42px 54px;
        opacity: 0
      }

      20.01%,
      33.33% {
        inset: -100vh 49px 100vh 54px;
        opacity: 1
      }

      43.33% {
        inset: -100vh 49px 42px 54px;
        opacity: 1
      }

      53.33% {
        inset: -100vh 49px 42px 54px;
        opacity: 0
      }

      53.34%,
      66.66% {
        inset: -100vh 49px 100vh 54px;
        opacity: 1
      }

      76.66% {
        inset: -100vh 49px 42px 54px;
        opacity: 1
      }

      86.66%,
      100% {
        inset: -100vh 49px 42px 54px;
        opacity: 0
      }
    }
  </style>
</head>

<body>
  <main>
    <div class="frame">
      <div class="growing"></div>
    </div>
  </main>
</body>

</html>