I Have Something

├── .vscode └── settings.json ├── images └── gift.png ├── js ├── main.js └── index.js ├── index.html ├── css ├── index.css └── style.css ├── style.css.map ├── flower.html └── scss └── style.scss /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /images/gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/SomethingForYou/HEAD/images/gift.png -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | 2 | onload = () => { 3 | const c = setTimeout(() => { 4 | document.body.classList.remove("not-loaded"); 5 | 6 | const titles = ('I LOVE U ').split('') 7 | const titleElement = document.getElementById('title'); 8 | let index = 0; 9 | 10 | function appendTitle() { 11 | if (index < titles.length) { 12 | titleElement.innerHTML += titles[index]; 13 | index++; 14 | setTimeout(appendTitle, 300); // 1000ms delay 15 | } 16 | } 17 | 18 | appendTitle(); 19 | 20 | clearTimeout(c); 21 | }, 1000); 22 | }; -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const title = document.querySelector('.title') 2 | const text = 'I Have Something For You'.split('') 3 | for (let index = 0; index < text.length; index++) { 4 | if (text[index] !== ' ') { 5 | title.innerHTML += `${text[index]}` 6 | } else { 7 | title.innerHTML += `` 8 | } 9 | } 10 | 11 | const textElements = document.querySelectorAll('.title span'); 12 | textElements.forEach((element) => { 13 | const randomDelay = Math.random() * 3; // Menghasilkan delay acak antara 0 hingga 3 detik 14 | element.style.animationDelay = `${randomDelay}s`; 15 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | I Have Something 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

19 | 20 | 21 |

22 | 23 | 28 | 29 | Open 30 | 31 |

32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --dark-color: #000; 11 | } 12 | 13 | .night { 14 | position: fixed; 15 | left: 50%; 16 | top: 0; 17 | transform: translateX(-50%); 18 | width: 100%; 19 | height: 100%; 20 | filter: blur(0.1vmin); 21 | background-image: radial-gradient(ellipse at top, transparent 0%, var(--dark-color)), radial-gradient(ellipse at bottom, var(--dark-color), rgba(145, 233, 255, 0.2)), repeating-linear-gradient(220deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), linear-gradient(90deg, rgb(255, 255, 250), rgb(240, 240, 240)); 22 | } 23 | 24 | .title { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | color: white; 29 | font-family: 'Courier New', Courier, monospace; 30 | 31 | display: flex; 32 | flex-wrap: wrap; 33 | justify-content: center; 34 | align-content: center; 35 | align-items: center; 36 | 37 | width: 100%; 38 | height: 100vh; 39 | text-shadow: 0 0 20px white; 40 | letter-spacing: 0px; 41 | } 42 | 43 | @media (min-width: 500px) { 44 | .title { 45 | letter-spacing: 20px; 46 | } 47 | } 48 | 49 | @keyframes typing { 50 | from { 51 | opacity: 0; 52 | } 53 | 54 | to { 55 | opacity: 1; 56 | } 57 | } 58 | 59 | /* Terapkan animasi dengan delay */ 60 | .title span { 61 | opacity: 0; 62 | animation: typing 1s ease forwards; 63 | animation-delay: var(--delay); 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | } 69 | 70 | .btn { 71 | border: none; 72 | width: 15em; 73 | height: 5em; 74 | border-radius: 3em; 75 | display: flex; 76 | justify-content: center; 77 | align-items: center; 78 | gap: 12px; 79 | background: #1C1A1C; 80 | cursor: pointer; 81 | transition: all 450ms ease-in-out; 82 | } 83 | 84 | .sparkle { 85 | fill: #AAAAAA; 86 | transition: all 800ms ease; 87 | } 88 | 89 | .text { 90 | font-weight: 600; 91 | color: #AAAAAA; 92 | font-size: medium; 93 | } 94 | 95 | .btn:hover { 96 | background: linear-gradient(0deg, #A47CF3, #683FEA); 97 | box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), 98 | inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2), 99 | 0px 0px 0px 4px rgba(255, 255, 255, 0.2), 100 | 0px 0px 180px 0px #9917FF; 101 | transform: translateY(-2px); 102 | } 103 | 104 | .btn:hover .text { 105 | color: white; 106 | } 107 | 108 | .btn:hover .sparkle { 109 | fill: white; 110 | transform: scale(1.2); 111 | } -------------------------------------------------------------------------------- /style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [ 4 | "scss/style.scss", 5 | "css/style.css" 6 | ], 7 | "names": [], 8 | "mappings": "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", 9 | "file": "css/style.css" 10 | } -------------------------------------------------------------------------------- /flower.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | FLOWERS 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 |

171 |

172 |

173 |

174 |

175 |

176 |

177 |

178 |

179 |

180 |

181 | 182 |

183 |

184 |

185 |

186 |

187 |

188 |

189 |

190 |

191 |

192 |

193 |

194 |

195 | 196 |

197 |

198 |

199 |

200 |

201 |

202 |

203 |

204 |

205 |

206 |

207 |

208 |

209 |

210 | 211 |

212 |

213 |

214 |

215 |

216 |

217 |

218 |

219 |

220 |

221 |

222 |

223 |

224 |

225 | 226 |

227 |

228 |

229 |

230 |

231 |

232 |

233 |

234 |

235 |

236 |

237 |

238 |

239 |

240 | 241 |

242 |

243 |

244 |

245 |

246 |

247 |

248 |

249 |

250 |

251 |

252 |

253 |

254 |

255 | 256 |

257 |

258 |

259 |

260 |

261 |

262 |

263 |

264 |

265 |

266 |

267 |

268 |

269 |

270 | 271 |

272 |

273 |

274 |

275 |

276 |

277 |

278 |

279 |

280 |

281 |

282 |

283 |

284 |

285 | 286 |

287 |

288 |

289 |

290 |

291 |

292 |

293 |

294 |

295 |

296 |

297 |

298 |

299 |

300 | 301 |

302 |

303 |

304 |

305 |

306 |

307 |

308 |

309 |

310 |

311 |

312 |

313 |

314 |

315 |

316 | 317 | 318 |

319 | 320 | 321 | 322 | 323 | 324 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --dark-color: #000; 11 | } 12 | 13 | .title { 14 | position: absolute; 15 | width: 100%; 16 | text-align: center; 17 | margin-top: 50px; 18 | top: 0; 19 | left: 0; 20 | color: white; 21 | font-family: 'Courier New', Courier, monospace; 22 | font-size: 70px; 23 | text-shadow: 0px 0px 20px white; 24 | } 25 | 26 | body { 27 | display: flex; 28 | align-items: flex-end; 29 | justify-content: center; 30 | min-height: 100vh; 31 | background-color: var(--dark-color); 32 | overflow: hidden; 33 | perspective: 1000px; 34 | } 35 | 36 | .night { 37 | position: fixed; 38 | left: 50%; 39 | top: 0; 40 | transform: translateX(-50%); 41 | width: 100%; 42 | height: 100%; 43 | filter: blur(0.1vmin); 44 | background-image: radial-gradient(ellipse at top, transparent 0%, var(--dark-color)), radial-gradient(ellipse at bottom, var(--dark-color), rgba(145, 233, 255, 0.2)), repeating-linear-gradient(220deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), linear-gradient(90deg, rgb(255, 255, 250), rgb(240, 240, 240)); 45 | } 46 | 47 | .flowers { 48 | position: relative; 49 | transform: scale(0.9); 50 | } 51 | 52 | .flower { 53 | position: absolute; 54 | bottom: 10vmin; 55 | transform-origin: bottom center; 56 | z-index: 10; 57 | --fl-speed: 0.8s; 58 | } 59 | 60 | .flower--1 { 61 | animation: moving-flower-1 4s linear infinite; 62 | } 63 | 64 | .flower--1 .flower__line { 65 | height: 70vmin; 66 | animation-delay: 0.3s; 67 | } 68 | 69 | .flower--1 .flower__line__leaf--1 { 70 | animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; 71 | } 72 | 73 | .flower--1 .flower__line__leaf--2 { 74 | animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; 75 | } 76 | 77 | .flower--1 .flower__line__leaf--3 { 78 | animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; 79 | } 80 | 81 | .flower--1 .flower__line__leaf--4 { 82 | animation: blooming-leaf-left var(--fl-speed) 1s backwards; 83 | } 84 | 85 | .flower--1 .flower__line__leaf--5 { 86 | animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; 87 | } 88 | 89 | .flower--1 .flower__line__leaf--6 { 90 | animation: blooming-leaf-left var(--fl-speed) 2s backwards; 91 | } 92 | 93 | .flower--2 { 94 | left: 50%; 95 | transform: rotate(20deg); 96 | animation: moving-flower-2 4s linear infinite; 97 | } 98 | 99 | .flower--2 .flower__line { 100 | height: 60vmin; 101 | animation-delay: 0.6s; 102 | } 103 | 104 | .flower--2 .flower__line__leaf--1 { 105 | animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; 106 | } 107 | 108 | .flower--2 .flower__line__leaf--2 { 109 | animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; 110 | } 111 | 112 | .flower--2 .flower__line__leaf--3 { 113 | animation: blooming-leaf-left var(--fl-speed) 1.5s backwards; 114 | } 115 | 116 | .flower--2 .flower__line__leaf--4 { 117 | animation: blooming-leaf-left var(--fl-speed) 1.3s backwards; 118 | } 119 | 120 | .flower--3 { 121 | left: 50%; 122 | transform: rotate(-15deg); 123 | animation: moving-flower-3 4s linear infinite; 124 | } 125 | 126 | .flower--3 .flower__line { 127 | animation-delay: 0.9s; 128 | } 129 | 130 | .flower--3 .flower__line__leaf--1 { 131 | animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; 132 | } 133 | 134 | .flower--3 .flower__line__leaf--2 { 135 | animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; 136 | } 137 | 138 | .flower--3 .flower__line__leaf--3 { 139 | animation: blooming-leaf-left var(--fl-speed) 2.1s backwards; 140 | } 141 | 142 | .flower--3 .flower__line__leaf--4 { 143 | animation: blooming-leaf-left var(--fl-speed) 1.9s backwards; 144 | } 145 | 146 | .flower__leafs { 147 | position: relative; 148 | animation: blooming-flower 2s backwards; 149 | } 150 | 151 | .flower__leafs--1 { 152 | animation-delay: 1.1s; 153 | } 154 | 155 | .flower__leafs--2 { 156 | animation-delay: 1.4s; 157 | } 158 | 159 | .flower__leafs--3 { 160 | animation-delay: 1.7s; 161 | } 162 | 163 | .flower__leafs::after { 164 | content: ""; 165 | position: absolute; 166 | left: 0; 167 | top: 0; 168 | transform: translate(-50%, -100%); 169 | width: 8vmin; 170 | height: 8vmin; 171 | background-color: #fff; 172 | filter: blur(10vmin); 173 | } 174 | 175 | .flower__leaf { 176 | position: absolute; 177 | bottom: 0; 178 | left: 50%; 179 | width: 8vmin; 180 | height: 11vmin; 181 | border-radius: 51% 49% 47% 53%/44% 45% 55% 69%; 182 | background-color: #a7ffee; 183 | background-image: linear-gradient(to top, #fff, #fff); 184 | transform-origin: bottom center; 185 | opacity: 0.9; 186 | box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5); 187 | } 188 | 189 | .flower__leaf--1 { 190 | transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); 191 | } 192 | 193 | .flower__leaf--2 { 194 | transform: translate(-50%, -4%) rotateX(40deg); 195 | } 196 | 197 | .flower__leaf--3 { 198 | transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); 199 | } 200 | 201 | .flower__leaf--4 { 202 | width: 8vmin; 203 | height: 8vmin; 204 | transform-origin: bottom left; 205 | border-radius: 4vmin 10vmin 4vmin 4vmin; 206 | transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 207 | background-image: linear-gradient(to top, rgba(255, 2555, 255, 0.4), #fff); 208 | z-index: 1; 209 | opacity: 0.8; 210 | -webkit-transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 211 | -moz-transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 212 | -ms-transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 213 | -o-transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 214 | } 215 | 216 | .flower__white-circle { 217 | position: absolute; 218 | left: -3.5vmin; 219 | top: -3vmin; 220 | width: 9vmin; 221 | height: 4vmin; 222 | border-radius: 50%; 223 | background-color: #fff; 224 | } 225 | 226 | .flower__white-circle::after { 227 | content: ""; 228 | position: absolute; 229 | left: 50%; 230 | top: 45%; 231 | transform: translate(-50%, -50%); 232 | width: 60%; 233 | height: 60%; 234 | border-radius: inherit; 235 | background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(157.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 235, 18), rgb(255, 206, 0)); 236 | } 237 | 238 | .flower__line { 239 | height: 55vmin; 240 | width: 1.5vmin; 241 | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)), linear-gradient(to top, transparent 10%, #fff, #fff); 242 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 243 | animation: grow-flower-tree 4s backwards; 244 | } 245 | 246 | .flower__line__leaf { 247 | --w: 7vmin; 248 | --h: calc(var(--w) + 2vmin); 249 | position: absolute; 250 | top: 20%; 251 | left: 90%; 252 | width: var(--w); 253 | height: var(--h); 254 | border-top-right-radius: var(--h); 255 | border-bottom-left-radius: var(--h); 256 | background-image: linear-gradient(to top, rgba(255, 255, 255, 0.4), #fff); 257 | } 258 | 259 | .flower__line__leaf--1 { 260 | transform: rotate(70deg) rotateY(30deg); 261 | } 262 | 263 | .flower__line__leaf--2 { 264 | top: 45%; 265 | transform: rotate(70deg) rotateY(30deg); 266 | } 267 | 268 | .flower__line__leaf--3, 269 | .flower__line__leaf--4, 270 | .flower__line__leaf--6 { 271 | border-top-right-radius: 0; 272 | border-bottom-left-radius: 0; 273 | border-top-left-radius: var(--h); 274 | border-bottom-right-radius: var(--h); 275 | left: -460%; 276 | top: 12%; 277 | transform: rotate(-70deg) rotateY(30deg); 278 | } 279 | 280 | .flower__line__leaf--4 { 281 | top: 40%; 282 | } 283 | 284 | .flower__line__leaf--5 { 285 | top: 0; 286 | transform-origin: left; 287 | transform: rotate(70deg) rotateY(30deg) scale(0.6); 288 | } 289 | 290 | .flower__line__leaf--6 { 291 | top: -2%; 292 | left: -450%; 293 | transform-origin: right; 294 | transform: rotate(-70deg) rotateY(30deg) scale(0.6); 295 | } 296 | 297 | .flower__light { 298 | position: absolute; 299 | bottom: 0vmin; 300 | width: 1vmin; 301 | height: 1vmin; 302 | background-color: rgb(255, 251, 0); 303 | border-radius: 50%; 304 | filter: blur(0.2vmin); 305 | animation: light-ans 4s linear infinite backwards; 306 | } 307 | 308 | .flower__light:nth-child(odd) { 309 | background-color: #fff; 310 | } 311 | 312 | .flower__light--1 { 313 | left: -2vmin; 314 | animation-delay: 1s; 315 | } 316 | 317 | .flower__light--2 { 318 | left: 3vmin; 319 | animation-delay: 0.5s; 320 | } 321 | 322 | .flower__light--3 { 323 | left: -6vmin; 324 | animation-delay: 0.3s; 325 | } 326 | 327 | .flower__light--4 { 328 | left: 6vmin; 329 | animation-delay: 0.9s; 330 | } 331 | 332 | .flower__light--5 { 333 | left: -1vmin; 334 | animation-delay: 1.5s; 335 | } 336 | 337 | .flower__light--6 { 338 | left: -4vmin; 339 | animation-delay: 3s; 340 | } 341 | 342 | .flower__light--7 { 343 | left: 3vmin; 344 | animation-delay: 2s; 345 | } 346 | 347 | .flower__light--8 { 348 | left: -6vmin; 349 | animation-delay: 3.5s; 350 | } 351 | 352 | .flower__grass { 353 | --c: #fff; 354 | --line-w: 1.5vmin; 355 | position: absolute; 356 | bottom: 12vmin; 357 | left: -7vmin; 358 | display: flex; 359 | flex-direction: column; 360 | align-items: flex-end; 361 | z-index: 20; 362 | transform-origin: bottom center; 363 | transform: rotate(-48deg) rotateY(40deg); 364 | } 365 | 366 | .flower__grass--1 { 367 | animation: moving-grass 2s linear infinite; 368 | } 369 | 370 | .flower__grass--2 { 371 | left: 2vmin; 372 | bottom: 10vmin; 373 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 374 | opacity: 0.8; 375 | z-index: 0; 376 | animation: moving-grass--2 1.5s linear infinite; 377 | } 378 | 379 | .flower__grass--top { 380 | width: 7vmin; 381 | height: 10vmin; 382 | border-top-right-radius: 100%; 383 | border-right: var(--line-w) solid var(--c); 384 | transform-origin: bottom center; 385 | transform: rotate(-2deg); 386 | } 387 | 388 | .flower__grass--bottom { 389 | margin-top: -2px; 390 | width: var(--line-w); 391 | height: 25vmin; 392 | background-image: linear-gradient(to top, transparent, var(--c)); 393 | } 394 | 395 | .flower__grass__leaf { 396 | --size: 10vmin; 397 | position: absolute; 398 | width: calc(var(--size) * 2.1); 399 | height: var(--size); 400 | border-top-left-radius: var(--size); 401 | border-top-right-radius: var(--size); 402 | background-image: linear-gradient(to top, transparent, transparent 30%, var(--c)); 403 | z-index: 100; 404 | } 405 | 406 | .flower__grass__leaf--1 { 407 | top: -6%; 408 | left: 30%; 409 | --size: 6vmin; 410 | transform: rotate(-20deg); 411 | animation: growing-grass-ans--1 2s 2.6s backwards; 412 | } 413 | 414 | @keyframes growing-grass-ans--1 { 415 | 0% { 416 | transform-origin: bottom left; 417 | transform: rotate(-20deg) scale(0); 418 | } 419 | } 420 | 421 | .flower__grass__leaf--2 { 422 | top: -5%; 423 | left: -110%; 424 | --size: 6vmin; 425 | transform: rotate(10deg); 426 | animation: growing-grass-ans--2 2s 2.4s linear backwards; 427 | } 428 | 429 | @keyframes growing-grass-ans--2 { 430 | 0% { 431 | transform-origin: bottom right; 432 | transform: rotate(10deg) scale(0); 433 | } 434 | } 435 | 436 | .flower__grass__leaf--3 { 437 | top: 5%; 438 | left: 60%; 439 | --size: 8vmin; 440 | transform: rotate(-18deg) rotateX(-20deg); 441 | animation: growing-grass-ans--3 2s 2.2s linear backwards; 442 | } 443 | 444 | @keyframes growing-grass-ans--3 { 445 | 0% { 446 | transform-origin: bottom left; 447 | transform: rotate(-18deg) rotateX(-20deg) scale(0); 448 | } 449 | } 450 | 451 | .flower__grass__leaf--4 { 452 | top: 6%; 453 | left: -135%; 454 | --size: 8vmin; 455 | transform: rotate(2deg); 456 | animation: growing-grass-ans--4 2s 2s linear backwards; 457 | } 458 | 459 | @keyframes growing-grass-ans--4 { 460 | 0% { 461 | transform-origin: bottom right; 462 | transform: rotate(2deg) scale(0); 463 | } 464 | } 465 | 466 | .flower__grass__leaf--5 { 467 | top: 20%; 468 | left: 60%; 469 | --size: 10vmin; 470 | transform: rotate(-24deg) rotateX(-20deg); 471 | animation: growing-grass-ans--5 2s 1.8s linear backwards; 472 | } 473 | 474 | @keyframes growing-grass-ans--5 { 475 | 0% { 476 | transform-origin: bottom left; 477 | transform: rotate(-24deg) rotateX(-20deg) scale(0); 478 | } 479 | } 480 | 481 | .flower__grass__leaf--6 { 482 | top: 22%; 483 | left: -180%; 484 | --size: 10vmin; 485 | transform: rotate(10deg); 486 | animation: growing-grass-ans--6 2s 1.6s linear backwards; 487 | } 488 | 489 | @keyframes growing-grass-ans--6 { 490 | 0% { 491 | transform-origin: bottom right; 492 | transform: rotate(10deg) scale(0); 493 | } 494 | } 495 | 496 | .flower__grass__leaf--7 { 497 | top: 39%; 498 | left: 70%; 499 | --size: 10vmin; 500 | transform: rotate(-10deg); 501 | animation: growing-grass-ans--7 2s 1.4s linear backwards; 502 | } 503 | 504 | @keyframes growing-grass-ans--7 { 505 | 0% { 506 | transform-origin: bottom left; 507 | transform: rotate(-10deg) scale(0); 508 | } 509 | } 510 | 511 | .flower__grass__leaf--8 { 512 | top: 40%; 513 | left: -215%; 514 | --size: 11vmin; 515 | transform: rotate(10deg); 516 | animation: growing-grass-ans--8 2s 1.2s linear backwards; 517 | } 518 | 519 | @keyframes growing-grass-ans--8 { 520 | 0% { 521 | transform-origin: bottom right; 522 | transform: rotate(10deg) scale(0); 523 | } 524 | } 525 | 526 | .flower__grass__overlay { 527 | position: absolute; 528 | top: -10%; 529 | right: 0%; 530 | width: 100%; 531 | height: 100%; 532 | background-color: rgba(0, 0, 0, 0.6); 533 | filter: blur(1.5vmin); 534 | z-index: 100; 535 | } 536 | 537 | .flower__g-long { 538 | --w: 2vmin; 539 | --h: 6vmin; 540 | --c: #fff; 541 | position: absolute; 542 | bottom: 10vmin; 543 | left: -3vmin; 544 | transform-origin: bottom center; 545 | transform: rotate(-30deg) rotateY(-20deg); 546 | display: flex; 547 | flex-direction: column; 548 | align-items: flex-end; 549 | animation: flower-g-long-ans 3s linear infinite; 550 | } 551 | 552 | @keyframes flower-g-long-ans { 553 | 554 | 0%, 555 | 100% { 556 | transform: rotate(-30deg) rotateY(-20deg); 557 | } 558 | 559 | 50% { 560 | transform: rotate(-32deg) rotateY(-20deg); 561 | } 562 | } 563 | 564 | .flower__g-long__top { 565 | top: calc(var(--h) * -1); 566 | width: calc(var(--w) + 1vmin); 567 | height: var(--h); 568 | border-top-right-radius: 100%; 569 | border-right: 0.7vmin solid var(--c); 570 | transform: translate(-0.7vmin, 1vmin); 571 | } 572 | 573 | .flower__g-long__bottom { 574 | width: var(--w); 575 | height: 50vmin; 576 | transform-origin: bottom center; 577 | background-image: linear-gradient(to top, transparent 30%, var(--c)); 578 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 579 | -webkit-clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); 580 | clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); 581 | } 582 | 583 | .flower__g-right { 584 | position: absolute; 585 | bottom: 6vmin; 586 | left: -2vmin; 587 | transform-origin: bottom left; 588 | transform: rotate(20deg); 589 | } 590 | 591 | .flower__g-right .leaf { 592 | width: 30vmin; 593 | height: 50vmin; 594 | border-top-left-radius: 100%; 595 | border-left: 2vmin solid #fff; 596 | background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%); 597 | -webkit-mask-image: linear-gradient(to top, transparent 30%, #fff 60%); 598 | } 599 | 600 | .flower__g-right--1 { 601 | animation: flower-g-right-ans 2.5s linear infinite; 602 | } 603 | 604 | .flower__g-right--2 { 605 | left: 5vmin; 606 | transform: rotateY(-180deg); 607 | animation: flower-g-right-ans--2 3s linear infinite; 608 | } 609 | 610 | .flower__g-right--2 .leaf { 611 | height: 75vmin; 612 | filter: blur(0.3vmin); 613 | opacity: 0.8; 614 | } 615 | 616 | @keyframes flower-g-right-ans { 617 | 618 | 0%, 619 | 100% { 620 | transform: rotate(20deg); 621 | } 622 | 623 | 50% { 624 | transform: rotate(24deg) rotateX(-20deg); 625 | } 626 | } 627 | 628 | @keyframes flower-g-right-ans--2 { 629 | 630 | 0%, 631 | 100% { 632 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); 633 | } 634 | 635 | 50% { 636 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); 637 | } 638 | } 639 | 640 | .flower__g-front { 641 | position: absolute; 642 | bottom: 6vmin; 643 | left: 2.5vmin; 644 | z-index: 100; 645 | transform-origin: bottom center; 646 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 647 | animation: flower__g-front-ans 2s linear infinite; 648 | } 649 | 650 | @keyframes flower__g-front-ans { 651 | 652 | 0%, 653 | 100% { 654 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 655 | } 656 | 657 | 50% { 658 | transform: rotate(-35deg) rotateY(40deg) scale(1.04); 659 | } 660 | } 661 | 662 | .flower__g-front__line { 663 | width: 0.3vmin; 664 | height: 20vmin; 665 | background-image: linear-gradient(to top, transparent, #fff, transparent 100%); 666 | position: relative; 667 | } 668 | 669 | .flower__g-front__leaf-wrapper { 670 | position: absolute; 671 | top: 0; 672 | left: 0; 673 | transform-origin: bottom left; 674 | transform: rotate(10deg); 675 | } 676 | 677 | .flower__g-front__leaf-wrapper:nth-child(even) { 678 | left: 0vmin; 679 | transform: rotateY(-180deg) rotate(5deg); 680 | animation: flower__g-front__leaf-left-ans 1s ease-in backwards; 681 | } 682 | 683 | .flower__g-front__leaf-wrapper:nth-child(odd) { 684 | animation: flower__g-front__leaf-ans 1s ease-in backwards; 685 | } 686 | 687 | .flower__g-front__leaf-wrapper--1 { 688 | top: -8vmin; 689 | transform: scale(0.7); 690 | animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important; 691 | } 692 | 693 | .flower__g-front__leaf-wrapper--2 { 694 | top: -8vmin; 695 | transform: rotateY(-180deg) scale(0.7) !important; 696 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 697 | } 698 | 699 | .flower__g-front__leaf-wrapper--3 { 700 | top: -3vmin; 701 | animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards; 702 | } 703 | 704 | .flower__g-front__leaf-wrapper--4 { 705 | top: -3vmin; 706 | transform: rotateY(-180deg) scale(0.9) !important; 707 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 708 | } 709 | 710 | @keyframes flower__g-front__leaf-left-ans-2 { 711 | 0% { 712 | transform: rotateY(-180deg) scale(0); 713 | } 714 | } 715 | 716 | .flower__g-front__leaf-wrapper--5, 717 | .flower__g-front__leaf-wrapper--6 { 718 | top: 2vmin; 719 | } 720 | 721 | .flower__g-front__leaf-wrapper--7, 722 | .flower__g-front__leaf-wrapper--8 { 723 | top: 6.5vmin; 724 | } 725 | 726 | .flower__g-front__leaf-wrapper--2 { 727 | animation-delay: 5.2s !important; 728 | } 729 | 730 | .flower__g-front__leaf-wrapper--3 { 731 | animation-delay: 4.9s !important; 732 | } 733 | 734 | .flower__g-front__leaf-wrapper--5 { 735 | animation-delay: 4.3s !important; 736 | } 737 | 738 | .flower__g-front__leaf-wrapper--6 { 739 | animation-delay: 4.1s !important; 740 | } 741 | 742 | .flower__g-front__leaf-wrapper--7 { 743 | animation-delay: 3.8s !important; 744 | } 745 | 746 | .flower__g-front__leaf-wrapper--8 { 747 | animation-delay: 3.5s !important; 748 | } 749 | 750 | @keyframes flower__g-front__leaf-ans { 751 | 0% { 752 | transform: rotate(10deg) scale(0); 753 | } 754 | } 755 | 756 | @keyframes flower__g-front__leaf-left-ans { 757 | 0% { 758 | transform: rotateY(-180deg) rotate(5deg) scale(0); 759 | } 760 | } 761 | 762 | .flower__g-front__leaf { 763 | width: 10vmin; 764 | height: 10vmin; 765 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; 766 | box-shadow: inset 0 2px 1vmin hsla(0, 0%, 100%, 0.2); 767 | background-image: linear-gradient(to bottom left, transparent, var(--dark-color)), linear-gradient(to bottom right, #fff 50%, transparent 50%, transparent); 768 | -webkit-mask-image: linear-gradient(to bottom right, #fff 50%, transparent 50%, transparent); 769 | mask-image: linear-gradient(to bottom right, #fff 50%, transparent 50%, transparent); 770 | } 771 | 772 | .flower__g-fr { 773 | position: absolute; 774 | bottom: -4vmin; 775 | left: vmin; 776 | transform-origin: bottom left; 777 | z-index: 10; 778 | animation: flower__g-fr-ans 2s linear infinite; 779 | } 780 | 781 | @keyframes flower__g-fr-ans { 782 | 783 | 0%, 784 | 100% { 785 | transform: rotate(2deg); 786 | } 787 | 788 | 50% { 789 | transform: rotate(4deg); 790 | -webkit-transform: rotate(4deg); 791 | -moz-transform: rotate(4deg); 792 | -ms-transform: rotate(4deg); 793 | -o-transform: rotate(4deg); 794 | } 795 | } 796 | 797 | .flower__g-fr .leaf { 798 | width: 30vmin; 799 | height: 50vmin; 800 | border-top-left-radius: 100%; 801 | border-left: 2vmin solid #fff; 802 | -webkit-mask-image: linear-gradient(to top, transparent 25%, #fff 50%); 803 | position: relative; 804 | z-index: 1; 805 | } 806 | 807 | .flower__g-fr__leaf { 808 | position: absolute; 809 | top: 0; 810 | left: 0; 811 | width: 10vmin; 812 | height: 10vmin; 813 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; 814 | box-shadow: inset 0 2px 1vmin hsla(0, 0%, 100%, 0.2); 815 | background-image: linear-gradient(to bottom left, transparent, var(--dark-color) 98%), linear-gradient(to bottom right, #fff 45%, transparent 50%, transparent); 816 | -webkit-mask-image: linear-gradient(135deg, #fff 40%, transparent 50%, transparent); 817 | } 818 | 819 | .flower__g-fr__leaf--1 { 820 | left: 20vmin; 821 | transform: rotate(45deg); 822 | animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; 823 | } 824 | 825 | @keyframes flower__g-fr-leaft-ans-1 { 826 | 0% { 827 | transform-origin: left; 828 | transform: rotate(45deg) scale(0); 829 | } 830 | } 831 | 832 | .flower__g-fr__leaf--2 { 833 | left: 12vmin; 834 | top: -7vmin; 835 | transform: rotate(25deg) rotateY(-180deg); 836 | animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards; 837 | } 838 | 839 | .flower__g-fr__leaf--3 { 840 | left: 15vmin; 841 | top: 6vmin; 842 | transform: rotate(55deg); 843 | animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; 844 | } 845 | 846 | .flower__g-fr__leaf--4 { 847 | left: 6vmin; 848 | top: -2vmin; 849 | transform: rotate(25deg) rotateY(-180deg); 850 | animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; 851 | } 852 | 853 | .flower__g-fr__leaf--5 { 854 | left: 10vmin; 855 | top: 14vmin; 856 | transform: rotate(55deg); 857 | animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; 858 | } 859 | 860 | @keyframes flower__g-fr-leaft-ans-5 { 861 | 0% { 862 | transform-origin: left; 863 | transform: rotate(55deg) scale(0); 864 | } 865 | } 866 | 867 | .flower__g-fr__leaf--6 { 868 | left: 0vmin; 869 | top: 6vmin; 870 | transform: rotate(25deg) rotateY(-180deg); 871 | animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; 872 | } 873 | 874 | @keyframes flower__g-fr-leaft-ans-6 { 875 | 0% { 876 | transform-origin: right; 877 | transform: rotate(25deg) rotateY(-180deg) scale(0); 878 | } 879 | } 880 | 881 | .flower__g-fr__leaf--7 { 882 | left: 5vmin; 883 | top: 22vmin; 884 | transform: rotate(45deg); 885 | animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards; 886 | } 887 | 888 | @keyframes flower__g-fr-leaft-ans-7 { 889 | 0% { 890 | transform-origin: left; 891 | transform: rotate(45deg) scale(0); 892 | } 893 | } 894 | 895 | .flower__g-fr__leaf--8 { 896 | left: -4vmin; 897 | top: 15vmin; 898 | transform: rotate(15deg) rotateY(-180deg); 899 | animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; 900 | } 901 | 902 | @keyframes flower__g-fr-leaft-ans-8 { 903 | 0% { 904 | transform-origin: right; 905 | transform: rotate(15deg) rotateY(-180deg) scale(0); 906 | } 907 | } 908 | 909 | .long-g { 910 | position: absolute; 911 | bottom: 25vmin; 912 | left: -42vmin; 913 | transform-origin: bottom left; 914 | } 915 | 916 | .long-g--1 { 917 | bottom: 0vmin; 918 | transform: scale(0.8) rotate(-5deg); 919 | } 920 | 921 | .long-g--1 .leaf { 922 | -webkit-mask-image: linear-gradient(to top, transparent 40%, #fff 80%) !important; 923 | } 924 | 925 | .long-g--1 .leaf--1 { 926 | --w: 5vmin; 927 | --h: 60vmin; 928 | left: -2vmin; 929 | transform: rotate(3deg) rotateY(-180deg); 930 | } 931 | 932 | .long-g--2, 933 | .long-g--3 { 934 | bottom: -3vmin; 935 | left: -35vmin; 936 | transform-origin: center; 937 | transform: scale(0.6) rotateX(60deg); 938 | } 939 | 940 | .long-g--2 .leaf, 941 | .long-g--3 .leaf { 942 | -webkit-mask-image: linear-gradient(to top, transparent 50%, #fff 80%) !important; 943 | } 944 | 945 | .long-g--2 .leaf--1, 946 | .long-g--3 .leaf--1 { 947 | left: -1vmin; 948 | transform: rotateY(-180deg); 949 | } 950 | 951 | .long-g--3 { 952 | left: -17vmin; 953 | bottom: 0vmin; 954 | } 955 | 956 | .long-g--3 .leaf { 957 | -webkit-mask-image: linear-gradient(to top, transparent 40%, #fff 80%) !important; 958 | } 959 | 960 | .long-g--4 { 961 | left: 25vmin; 962 | bottom: -3vmin; 963 | transform-origin: center; 964 | transform: scale(0.6) rotateX(60deg); 965 | } 966 | 967 | .long-g--4 .leaf { 968 | -webkit-mask-image: linear-gradient(to top, transparent 50%, #fff 80%) !important; 969 | } 970 | 971 | .long-g--5 { 972 | left: 42vmin; 973 | bottom: 0vmin; 974 | transform: scale(0.8) rotate(2deg); 975 | } 976 | 977 | .long-g--6 { 978 | left: 0vmin; 979 | bottom: -20vmin; 980 | z-index: 100; 981 | filter: blur(0.3vmin); 982 | transform: scale(0.8) rotate(2deg); 983 | } 984 | 985 | .long-g--7 { 986 | left: 35vmin; 987 | bottom: 20vmin; 988 | z-index: -1; 989 | filter: blur(0.3vmin); 990 | transform: scale(0.6) rotate(2deg); 991 | opacity: 0.7; 992 | } 993 | 994 | .long-g .leaf { 995 | --w: 15vmin; 996 | --h: 40vmin; 997 | --c: #1aaa15; 998 | position: absolute; 999 | bottom: 0; 1000 | width: var(--w); 1001 | height: var(--h); 1002 | border-top-left-radius: 100%; 1003 | border-left: 2vmin solid var(--c); 1004 | -webkit-mask-image: linear-gradient(to top, transparent 20%, var(--dark-color)); 1005 | transform-origin: bottom center; 1006 | } 1007 | 1008 | .long-g .leaf--0 { 1009 | left: 2vmin; 1010 | animation: leaf-ans-1 4s linear infinite; 1011 | } 1012 | 1013 | .long-g .leaf--1 { 1014 | --w: 5vmin; 1015 | --h: 60vmin; 1016 | animation: leaf-ans-1 4s linear infinite; 1017 | } 1018 | 1019 | .long-g .leaf--2 { 1020 | --w: 10vmin; 1021 | --h: 40vmin; 1022 | left: -0.5vmin; 1023 | bottom: 5vmin; 1024 | transform-origin: bottom left; 1025 | transform: rotateY(-180deg); 1026 | animation: leaf-ans-2 3s linear infinite; 1027 | } 1028 | 1029 | .long-g .leaf--3 { 1030 | --w: 5vmin; 1031 | --h: 30vmin; 1032 | left: -1vmin; 1033 | bottom: 3.2vmin; 1034 | transform-origin: bottom left; 1035 | transform: rotate(-10deg) rotateY(-180deg); 1036 | animation: leaf-ans-3 3s linear infinite; 1037 | } 1038 | 1039 | @keyframes leaf-ans-1 { 1040 | 1041 | 0%, 1042 | 100% { 1043 | transform: rotate(-5deg) scale(1); 1044 | } 1045 | 1046 | 50% { 1047 | transform: rotate(5deg) scale(1.1); 1048 | } 1049 | } 1050 | 1051 | @keyframes leaf-ans-2 { 1052 | 1053 | 0%, 1054 | 100% { 1055 | transform: rotateY(-180deg) rotate(5deg); 1056 | } 1057 | 1058 | 50% { 1059 | transform: rotateY(-180deg) rotate(0deg) scale(1.1); 1060 | } 1061 | } 1062 | 1063 | @keyframes leaf-ans-3 { 1064 | 1065 | 0%, 1066 | 100% { 1067 | transform: rotate(-10deg) rotateY(-180deg); 1068 | } 1069 | 1070 | 50% { 1071 | transform: rotate(-20deg) rotateY(-180deg); 1072 | } 1073 | } 1074 | 1075 | .grow-ans { 1076 | animation: grow-ans 2s var(--d) backwards; 1077 | } 1078 | 1079 | @keyframes grow-ans { 1080 | 0% { 1081 | transform: scale(0); 1082 | opacity: 0; 1083 | } 1084 | } 1085 | 1086 | @keyframes light-ans { 1087 | 0% { 1088 | opacity: 0; 1089 | transform: translateY(0vmin); 1090 | } 1091 | 1092 | 25% { 1093 | opacity: 1; 1094 | transform: translateY(-5vmin) translateX(-2vmin); 1095 | } 1096 | 1097 | 50% { 1098 | opacity: 1; 1099 | transform: translateY(-15vmin) translateX(2vmin); 1100 | filter: blur(0.2vmin); 1101 | } 1102 | 1103 | 75% { 1104 | transform: translateY(-20vmin) translateX(-2vmin); 1105 | filter: blur(0.2vmin); 1106 | } 1107 | 1108 | 100% { 1109 | transform: translateY(-30vmin); 1110 | opacity: 0; 1111 | filter: blur(1vmin); 1112 | } 1113 | } 1114 | 1115 | @keyframes moving-flower-1 { 1116 | 1117 | 0%, 1118 | 100% { 1119 | transform: rotate(2deg); 1120 | } 1121 | 1122 | 50% { 1123 | transform: rotate(-2deg); 1124 | } 1125 | } 1126 | 1127 | @keyframes moving-flower-2 { 1128 | 1129 | 0%, 1130 | 100% { 1131 | transform: rotate(18deg); 1132 | } 1133 | 1134 | 50% { 1135 | transform: rotate(14deg); 1136 | } 1137 | } 1138 | 1139 | @keyframes moving-flower-3 { 1140 | 1141 | 0%, 1142 | 100% { 1143 | transform: rotate(-18deg); 1144 | } 1145 | 1146 | 50% { 1147 | transform: rotate(-20deg) rotateY(-10deg); 1148 | } 1149 | } 1150 | 1151 | @keyframes blooming-leaf-right { 1152 | 0% { 1153 | transform-origin: left; 1154 | transform: rotate(70deg) rotateY(30deg) scale(0); 1155 | } 1156 | } 1157 | 1158 | @keyframes blooming-leaf-left { 1159 | 0% { 1160 | transform-origin: right; 1161 | transform: rotate(-70deg) rotateY(30deg) scale(0); 1162 | } 1163 | } 1164 | 1165 | @keyframes grow-flower-tree { 1166 | 0% { 1167 | height: 0; 1168 | border-radius: 1vmin; 1169 | } 1170 | } 1171 | 1172 | @keyframes blooming-flower { 1173 | 0% { 1174 | transform: scale(0); 1175 | } 1176 | } 1177 | 1178 | @keyframes moving-grass { 1179 | 1180 | 0%, 1181 | 100% { 1182 | transform: rotate(-48deg) rotateY(40deg); 1183 | } 1184 | 1185 | 50% { 1186 | transform: rotate(-50deg) rotateY(40deg); 1187 | } 1188 | } 1189 | 1190 | @keyframes moving-grass--2 { 1191 | 1192 | 0%, 1193 | 100% { 1194 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 1195 | } 1196 | 1197 | 50% { 1198 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); 1199 | } 1200 | } 1201 | 1202 | .growing-grass { 1203 | animation: growing-grass-ans 1s 2s backwards; 1204 | } 1205 | 1206 | @keyframes growing-grass-ans { 1207 | 0% { 1208 | transform: scale(0); 1209 | } 1210 | } 1211 | 1212 | .not-loaded * { 1213 | animation-play-state: paused !important; 1214 | } 1215 | 1216 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --dark-color: #000; 11 | } 12 | 13 | body { 14 | display: flex; 15 | align-items: flex-end; 16 | justify-content: center; 17 | min-height: 100vh; 18 | background-color: var(--dark-color); 19 | overflow: hidden; 20 | perspective: 1000px; 21 | } 22 | 23 | .night { 24 | position: fixed; 25 | left: 50%; 26 | top: 0; 27 | transform: translateX(-50%); 28 | width: 100%; 29 | height: 100%; 30 | filter: blur(0.1vmin); 31 | background-image: radial-gradient( 32 | ellipse at top, 33 | transparent 0%, 34 | var(--dark-color) 35 | ), 36 | radial-gradient( 37 | ellipse at bottom, 38 | var(--dark-color), 39 | rgba(145, 233, 255, 0.2) 40 | ), 41 | repeating-linear-gradient( 42 | 220deg, 43 | rgb(0, 0, 0) 0px, 44 | rgb(0, 0, 0) 19px, 45 | transparent 19px, 46 | transparent 22px 47 | ), 48 | repeating-linear-gradient( 49 | 189deg, 50 | rgb(0, 0, 0) 0px, 51 | rgb(0, 0, 0) 19px, 52 | transparent 19px, 53 | transparent 22px 54 | ), 55 | repeating-linear-gradient( 56 | 148deg, 57 | rgb(0, 0, 0) 0px, 58 | rgb(0, 0, 0) 19px, 59 | transparent 19px, 60 | transparent 22px 61 | ), 62 | linear-gradient(90deg, rgb(0, 255, 250), rgb(240, 240, 240)); 63 | } 64 | 65 | .flowers { 66 | position: relative; 67 | transform: scale(0.9); 68 | } 69 | 70 | .flower { 71 | position: absolute; 72 | bottom: 10vmin; 73 | transform-origin: bottom center; 74 | z-index: 10; 75 | 76 | --fl-speed: 0.8s; 77 | 78 | &--1 { 79 | animation: moving-flower-1 4s linear infinite; 80 | .flower__line { 81 | $delay: 0.3s; 82 | 83 | height: 70vmin; 84 | animation-delay: $delay; 85 | 86 | &__leaf { 87 | &--1 { 88 | animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; 89 | } 90 | 91 | &--2 { 92 | animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; 93 | } 94 | 95 | &--3 { 96 | animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; 97 | } 98 | 99 | &--4 { 100 | animation: blooming-leaf-left var(--fl-speed) 1s backwards; 101 | } 102 | 103 | &--5 { 104 | animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; 105 | } 106 | 107 | &--6 { 108 | animation: blooming-leaf-left var(--fl-speed) 2s backwards; 109 | } 110 | } 111 | } 112 | } 113 | 114 | &--2 { 115 | left: 50%; 116 | transform: rotate(20deg); 117 | animation: moving-flower-2 4s linear infinite; 118 | .flower__line { 119 | height: 60vmin; 120 | animation-delay: 0.6s; 121 | 122 | &__leaf { 123 | &--1 { 124 | animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; 125 | } 126 | 127 | &--2 { 128 | animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; 129 | } 130 | 131 | &--3 { 132 | animation: blooming-leaf-left var(--fl-speed) 1.5s backwards; 133 | } 134 | 135 | &--4 { 136 | animation: blooming-leaf-left var(--fl-speed) 1.3s backwards; 137 | } 138 | } 139 | } 140 | } 141 | 142 | &--3 { 143 | left: 50%; 144 | transform: rotate(-15deg); 145 | animation: moving-flower-3 4s linear infinite; 146 | .flower__line { 147 | animation-delay: 0.9s; 148 | &__leaf { 149 | &--1 { 150 | animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; 151 | } 152 | 153 | &--2 { 154 | animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; 155 | } 156 | 157 | &--3 { 158 | animation: blooming-leaf-left var(--fl-speed) 2.1s backwards; 159 | } 160 | 161 | &--4 { 162 | animation: blooming-leaf-left var(--fl-speed) 1.9s backwards; 163 | } 164 | } 165 | } 166 | } 167 | 168 | &__leafs { 169 | position: relative; 170 | animation: blooming-flower 2s backwards; 171 | 172 | $delay: 0.8; 173 | $inc: 0.3; 174 | 175 | @for $i from 1 through 3 { 176 | &--#{$i} { 177 | $delay: $delay + $inc; 178 | animation-delay: #{$delay}s; 179 | } 180 | } 181 | 182 | &::after { 183 | content: ""; 184 | position: absolute; 185 | left: 0; 186 | top: 0; 187 | transform: translate(-50%, -100%); 188 | width: 8vmin; 189 | height: 8vmin; 190 | background-color: #6bf0ff; 191 | filter: blur(10vmin); 192 | } 193 | } 194 | 195 | &__leaf { 196 | position: absolute; 197 | bottom: 0; 198 | left: 50%; 199 | width: 8vmin; 200 | height: 11vmin; 201 | border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%; 202 | background-color: #a7ffee; 203 | background-image: linear-gradient(to top, #54b8aa, #a7ffee); 204 | transform-origin: bottom center; 205 | opacity: 0.9; 206 | box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5); 207 | 208 | &--1 { 209 | transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); 210 | } 211 | 212 | &--2 { 213 | transform: translate(-50%, -4%) rotateX(40deg); 214 | } 215 | 216 | &--3 { 217 | transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); 218 | } 219 | 220 | &--4 { 221 | width: 8vmin; 222 | height: 8vmin; 223 | transform-origin: bottom left; 224 | border-radius: 4vmin 10vmin 4vmin 4vmin; 225 | transform: translate(-0%, 18%) rotateX(70deg) rotate(-43deg); 226 | background-image: linear-gradient(to top, #39c6d6, #a7ffee); 227 | z-index: 1; 228 | opacity: 0.8; 229 | } 230 | } 231 | 232 | &__white-circle { 233 | position: absolute; 234 | left: -3.5vmin; 235 | top: -3vmin; 236 | width: 9vmin; 237 | height: 4vmin; 238 | border-radius: 50%; 239 | background-color: #fff; 240 | 241 | &::after { 242 | content: ""; 243 | position: absolute; 244 | left: 50%; 245 | top: 45%; 246 | transform: translate(-50%, -50%); 247 | width: 60%; 248 | height: 60%; 249 | border-radius: inherit; 250 | background-image: repeating-linear-gradient( 251 | 135deg, 252 | rgba(0, 0, 0, 0.03) 0px, 253 | rgba(0, 0, 0, 0.03) 1px, 254 | transparent 1px, 255 | transparent 12px 256 | ), 257 | repeating-linear-gradient( 258 | 45deg, 259 | rgba(0, 0, 0, 0.03) 0px, 260 | rgba(0, 0, 0, 0.03) 1px, 261 | transparent 1px, 262 | transparent 12px 263 | ), 264 | repeating-linear-gradient( 265 | 67.5deg, 266 | rgba(0, 0, 0, 0.03) 0px, 267 | rgba(0, 0, 0, 0.03) 1px, 268 | transparent 1px, 269 | transparent 12px 270 | ), 271 | repeating-linear-gradient( 272 | 135deg, 273 | rgba(0, 0, 0, 0.03) 0px, 274 | rgba(0, 0, 0, 0.03) 1px, 275 | transparent 1px, 276 | transparent 12px 277 | ), 278 | repeating-linear-gradient( 279 | 45deg, 280 | rgba(0, 0, 0, 0.03) 0px, 281 | rgba(0, 0, 0, 0.03) 1px, 282 | transparent 1px, 283 | transparent 12px 284 | ), 285 | repeating-linear-gradient( 286 | 112.5deg, 287 | rgba(0, 0, 0, 0.03) 0px, 288 | rgba(0, 0, 0, 0.03) 1px, 289 | transparent 1px, 290 | transparent 12px 291 | ), 292 | repeating-linear-gradient( 293 | 112.5deg, 294 | rgba(0, 0, 0, 0.03) 0px, 295 | rgba(0, 0, 0, 0.03) 1px, 296 | transparent 1px, 297 | transparent 12px 298 | ), 299 | repeating-linear-gradient( 300 | 45deg, 301 | rgba(0, 0, 0, 0.03) 0px, 302 | rgba(0, 0, 0, 0.03) 1px, 303 | transparent 1px, 304 | transparent 12px 305 | ), 306 | repeating-linear-gradient( 307 | 22.5deg, 308 | rgba(0, 0, 0, 0.03) 0px, 309 | rgba(0, 0, 0, 0.03) 1px, 310 | transparent 1px, 311 | transparent 12px 312 | ), 313 | repeating-linear-gradient( 314 | 45deg, 315 | rgba(0, 0, 0, 0.03) 0px, 316 | rgba(0, 0, 0, 0.03) 1px, 317 | transparent 1px, 318 | transparent 12px 319 | ), 320 | repeating-linear-gradient( 321 | 22.5deg, 322 | rgba(0, 0, 0, 0.03) 0px, 323 | rgba(0, 0, 0, 0.03) 1px, 324 | transparent 1px, 325 | transparent 12px 326 | ), 327 | repeating-linear-gradient( 328 | 135deg, 329 | rgba(0, 0, 0, 0.03) 0px, 330 | rgba(0, 0, 0, 0.03) 1px, 331 | transparent 1px, 332 | transparent 12px 333 | ), 334 | repeating-linear-gradient( 335 | 157.5deg, 336 | rgba(0, 0, 0, 0.03) 0px, 337 | rgba(0, 0, 0, 0.03) 1px, 338 | transparent 1px, 339 | transparent 12px 340 | ), 341 | repeating-linear-gradient( 342 | 67.5deg, 343 | rgba(0, 0, 0, 0.03) 0px, 344 | rgba(0, 0, 0, 0.03) 1px, 345 | transparent 1px, 346 | transparent 12px 347 | ), 348 | repeating-linear-gradient( 349 | 67.5deg, 350 | rgba(0, 0, 0, 0.03) 0px, 351 | rgba(0, 0, 0, 0.03) 1px, 352 | transparent 1px, 353 | transparent 12px 354 | ), 355 | linear-gradient(90deg, rgb(255, 235, 18), rgb(255, 206, 0)); 356 | } 357 | } 358 | 359 | &__line { 360 | height: 55vmin; 361 | width: 1.5vmin; 362 | background-image: linear-gradient( 363 | to left, 364 | rgb(0, 0, 0, 0.2), 365 | transparent, 366 | rgba(255, 255, 255, 0.2) 367 | ), 368 | linear-gradient(to top, transparent 10%, #14757a, #39c6d6); 369 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 370 | animation: grow-flower-tree 4s backwards; 371 | 372 | &__leaf { 373 | --w: 7vmin; 374 | --h: calc(var(--w) + 2vmin); 375 | position: absolute; 376 | top: 20%; 377 | left: 90%; 378 | width: var(--w); 379 | height: var(--h); 380 | border-top-right-radius: var(--h); 381 | border-bottom-left-radius: var(--h); 382 | background-image: linear-gradient( 383 | to top, 384 | rgba(20, 117, 122, 0.4), 385 | #39c6d6 386 | ); 387 | 388 | &--1 { 389 | transform: rotate(70deg) rotateY(30deg); 390 | } 391 | 392 | &--2 { 393 | top: 45%; 394 | transform: rotate(70deg) rotateY(30deg); 395 | } 396 | 397 | &--3, 398 | &--4, 399 | &--6 { 400 | border-top-right-radius: 0; 401 | border-bottom-left-radius: 0; 402 | border-top-left-radius: var(--h); 403 | border-bottom-right-radius: var(--h); 404 | left: -460%; 405 | top: 12%; 406 | transform: rotate(-70deg) rotateY(30deg); 407 | } 408 | 409 | &--4 { 410 | top: 40%; 411 | } 412 | 413 | &--5 { 414 | top: 0; 415 | transform-origin: left; 416 | transform: rotate(70deg) rotateY(30deg) scale(0.6); 417 | } 418 | 419 | &--6 { 420 | top: -2%; 421 | left: -450%; 422 | transform-origin: right; 423 | transform: rotate(-70deg) rotateY(30deg) scale(0.6); 424 | } 425 | } 426 | } 427 | 428 | &__light { 429 | position: absolute; 430 | bottom: 0vmin; 431 | width: 1vmin; 432 | height: 1vmin; 433 | background-color: rgb(255, 251, 0); 434 | border-radius: 50%; 435 | filter: blur(0.2vmin); 436 | animation: light-ans 4s linear infinite backwards; 437 | 438 | &:nth-child(odd) { 439 | background-color: #23f0ff; 440 | } 441 | 442 | &--1 { 443 | left: -2vmin; 444 | animation-delay: 1s; 445 | } 446 | 447 | &--2 { 448 | left: 3vmin; 449 | animation-delay: 0.5s; 450 | } 451 | 452 | &--3 { 453 | left: -6vmin; 454 | animation-delay: 0.3s; 455 | } 456 | 457 | &--4 { 458 | left: 6vmin; 459 | animation-delay: 0.9s; 460 | } 461 | 462 | &--5 { 463 | left: -1vmin; 464 | animation-delay: 1.5s; 465 | } 466 | 467 | &--6 { 468 | left: -4vmin; 469 | animation-delay: 3s; 470 | } 471 | 472 | &--7 { 473 | left: 3vmin; 474 | animation-delay: 2s; 475 | } 476 | 477 | &--8 { 478 | left: -6vmin; 479 | animation-delay: 3.5s; 480 | } 481 | } 482 | 483 | &__grass { 484 | --c: #159faa; 485 | --line-w: 1.5vmin; 486 | 487 | position: absolute; 488 | bottom: 12vmin; 489 | left: -7vmin; 490 | display: flex; 491 | flex-direction: column; 492 | align-items: flex-end; 493 | z-index: 20; 494 | transform-origin: bottom center; 495 | transform: rotate(-48deg) rotateY(40deg); 496 | 497 | &--1 { 498 | animation: moving-grass 2s linear infinite; 499 | } 500 | 501 | &--2 { 502 | left: 2vmin; 503 | bottom: 10vmin; 504 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 505 | opacity: 0.8; 506 | z-index: 0; 507 | animation: moving-grass--2 1.5s linear infinite; 508 | } 509 | 510 | &--top { 511 | width: 7vmin; 512 | height: 10vmin; 513 | border-top-right-radius: 100%; 514 | border-right: var(--line-w) solid var(--c); 515 | transform-origin: bottom center; 516 | transform: rotate(-2deg); 517 | } 518 | 519 | &--bottom { 520 | margin-top: -2px; 521 | width: var(--line-w); 522 | height: 25vmin; 523 | background-image: linear-gradient(to top, transparent, var(--c)); 524 | } 525 | 526 | &__leaf { 527 | --size: 10vmin; 528 | position: absolute; 529 | width: calc(var(--size) * 2.1); 530 | height: var(--size); 531 | border-top-left-radius: var(--size); 532 | border-top-right-radius: var(--size); 533 | background-image: linear-gradient( 534 | to top, 535 | transparent, 536 | transparent 30%, 537 | var(--c) 538 | ); 539 | z-index: 100; 540 | 541 | $speed-leaf: 2s; 542 | 543 | &--1 { 544 | top: -6%; 545 | left: 30%; 546 | --size: 6vmin; 547 | transform: rotate(-20deg); 548 | animation: growing-grass-ans--1 $speed-leaf 2.6s backwards; 549 | @keyframes growing-grass-ans--1 { 550 | 0% { 551 | transform-origin: bottom left; 552 | transform: rotate(-20deg) scale(0); 553 | } 554 | } 555 | } 556 | 557 | &--2 { 558 | top: -5%; 559 | left: -110%; 560 | --size: 6vmin; 561 | transform: rotate(10deg); 562 | animation: growing-grass-ans--2 $speed-leaf 2.4s linear backwards; 563 | @keyframes growing-grass-ans--2 { 564 | 0% { 565 | transform-origin: bottom right; 566 | transform: rotate(10deg) scale(0); 567 | } 568 | } 569 | } 570 | 571 | &--3 { 572 | top: 5%; 573 | left: 60%; 574 | --size: 8vmin; 575 | transform: rotate(-18deg) rotateX(-20deg); 576 | animation: growing-grass-ans--3 $speed-leaf 2.2s linear backwards; 577 | @keyframes growing-grass-ans--3 { 578 | 0% { 579 | transform-origin: bottom left; 580 | transform: rotate(-18deg) rotateX(-20deg) scale(0); 581 | } 582 | } 583 | } 584 | 585 | &--4 { 586 | top: 6%; 587 | left: -135%; 588 | --size: 8vmin; 589 | transform: rotate(2deg); 590 | animation: growing-grass-ans--4 $speed-leaf 2s linear backwards; 591 | @keyframes growing-grass-ans--4 { 592 | 0% { 593 | transform-origin: bottom right; 594 | transform: rotate(2deg) scale(0); 595 | } 596 | } 597 | } 598 | 599 | &--5 { 600 | top: 20%; 601 | left: 60%; 602 | --size: 10vmin; 603 | transform: rotate(-24deg) rotateX(-20deg); 604 | animation: growing-grass-ans--5 $speed-leaf 1.8s linear backwards; 605 | @keyframes growing-grass-ans--5 { 606 | 0% { 607 | transform-origin: bottom left; 608 | transform: rotate(-24deg) rotateX(-20deg) scale(0); 609 | } 610 | } 611 | } 612 | 613 | &--6 { 614 | top: 22%; 615 | left: -180%; 616 | --size: 10vmin; 617 | transform: rotate(10deg); 618 | animation: growing-grass-ans--6 $speed-leaf 1.6s linear backwards; 619 | @keyframes growing-grass-ans--6 { 620 | 0% { 621 | transform-origin: bottom right; 622 | transform: rotate(10deg) scale(0); 623 | } 624 | } 625 | } 626 | 627 | &--7 { 628 | top: 39%; 629 | left: 70%; 630 | --size: 10vmin; 631 | transform: rotate(-10deg); 632 | animation: growing-grass-ans--7 $speed-leaf 1.4s linear backwards; 633 | @keyframes growing-grass-ans--7 { 634 | 0% { 635 | transform-origin: bottom left; 636 | transform: rotate(-10deg) scale(0); 637 | } 638 | } 639 | } 640 | 641 | &--8 { 642 | top: 40%; 643 | left: -215%; 644 | --size: 11vmin; 645 | transform: rotate(10deg); 646 | animation: growing-grass-ans--8 $speed-leaf 1.2s linear backwards; 647 | @keyframes growing-grass-ans--8 { 648 | 0% { 649 | transform-origin: bottom right; 650 | transform: rotate(10deg) scale(0); 651 | } 652 | } 653 | } 654 | } 655 | 656 | &__overlay { 657 | position: absolute; 658 | top: -10%; 659 | right: 0%; 660 | width: 100%; 661 | height: 100%; 662 | background-color: rgba(0, 0, 0, 0.6); 663 | filter: blur(1.5vmin); 664 | z-index: 100; 665 | } 666 | } 667 | 668 | &__g-long { 669 | --w: 2vmin; 670 | --h: 6vmin; 671 | --c: #159faa; 672 | position: absolute; 673 | bottom: 10vmin; 674 | left: -3vmin; 675 | transform-origin: bottom center; 676 | transform: rotate(-30deg) rotateY(-20deg); 677 | display: flex; 678 | flex-direction: column; 679 | align-items: flex-end; 680 | animation: flower-g-long-ans 3s linear infinite; 681 | 682 | @keyframes flower-g-long-ans { 683 | 0%, 684 | 100% { 685 | transform: rotate(-30deg) rotateY(-20deg); 686 | } 687 | 688 | 50% { 689 | transform: rotate(-32deg) rotateY(-20deg); 690 | } 691 | } 692 | 693 | &__top { 694 | top: calc(var(--h) * -1); 695 | width: calc(var(--w) + 1vmin); 696 | height: var(--h); 697 | border-top-right-radius: 100%; 698 | border-right: 0.7vmin solid var(--c); 699 | transform: translate(-0.7vmin, 1vmin); 700 | } 701 | 702 | &__bottom { 703 | width: var(--w); 704 | height: 50vmin; 705 | transform-origin: bottom center; 706 | background-image: linear-gradient(to top, transparent 30%, var(--c)); 707 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 708 | clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); 709 | } 710 | } 711 | 712 | &__g-right { 713 | position: absolute; 714 | bottom: 6vmin; 715 | left: -2vmin; 716 | transform-origin: bottom left; 717 | transform: rotate(20deg); 718 | 719 | .leaf { 720 | width: 30vmin; 721 | height: 50vmin; 722 | border-top-left-radius: 100%; 723 | border-left: 2vmin solid #079097; 724 | background-image: linear-gradient( 725 | to bottom, 726 | transparent, 727 | var(--dark-color) 60% 728 | ); 729 | -webkit-mask-image: linear-gradient(to top, transparent 30%, #079097 60%); 730 | } 731 | 732 | &--1 { 733 | animation: flower-g-right-ans 2.5s linear infinite; 734 | } 735 | 736 | &--2 { 737 | left: 5vmin; 738 | transform: rotateY(-180deg); 739 | animation: flower-g-right-ans--2 3s linear infinite; 740 | 741 | .leaf { 742 | height: 75vmin; 743 | filter: blur(0.3vmin); 744 | opacity: 0.8; 745 | } 746 | } 747 | 748 | @keyframes flower-g-right-ans { 749 | 0%, 750 | 100% { 751 | transform: rotate(20deg); 752 | } 753 | 754 | 50% { 755 | transform: rotate(24deg) rotateX(-20deg); 756 | } 757 | } 758 | 759 | @keyframes flower-g-right-ans--2 { 760 | 0%, 761 | 100% { 762 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); 763 | } 764 | 765 | 50% { 766 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); 767 | } 768 | } 769 | } 770 | 771 | &__g-front { 772 | position: absolute; 773 | bottom: 6vmin; 774 | left: 2.5vmin; 775 | z-index: 100; 776 | transform-origin: bottom center; 777 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 778 | animation: flower__g-front-ans 2s linear infinite; 779 | 780 | @keyframes flower__g-front-ans { 781 | 0%, 782 | 100% { 783 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 784 | } 785 | 50% { 786 | transform: rotate(-35deg) rotateY(40deg) scale(1.04); 787 | } 788 | } 789 | 790 | &__line { 791 | width: 0.3vmin; 792 | height: 20vmin; 793 | background-image: linear-gradient( 794 | to top, 795 | transparent, 796 | #079097, 797 | transparent 100% 798 | ); 799 | position: relative; 800 | } 801 | 802 | &__leaf-wrapper { 803 | position: absolute; 804 | top: 0; 805 | left: 0; 806 | transform-origin: bottom left; 807 | transform: rotate(10deg); 808 | 809 | &:nth-child(even) { 810 | left: 0vmin; 811 | transform: rotateY(-180deg) rotate(5deg); 812 | animation: flower__g-front__leaf-left-ans 1s ease-in backwards; 813 | } 814 | 815 | &:nth-child(odd) { 816 | animation: flower__g-front__leaf-ans 1s ease-in backwards; 817 | } 818 | 819 | &--1 { 820 | top: -8vmin; 821 | transform: scale(0.7); 822 | animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important; 823 | } 824 | 825 | &--2 { 826 | top: -8vmin; 827 | transform: rotateY(-180deg) scale(0.7) !important; 828 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 829 | } 830 | 831 | &--3 { 832 | top: -3vmin; 833 | animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards; 834 | } 835 | 836 | &--4 { 837 | top: -3vmin; 838 | transform: rotateY(-180deg) scale(0.9) !important; 839 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 840 | } 841 | 842 | @keyframes flower__g-front__leaf-left-ans-2 { 843 | 0% { 844 | transform: rotateY(-180deg) scale(0); 845 | } 846 | } 847 | 848 | &--5, 849 | &--6 { 850 | top: 2vmin; 851 | } 852 | 853 | &--7, 854 | &--8 { 855 | top: 6.5vmin; 856 | } 857 | 858 | &--2 { 859 | animation-delay: 5.2s !important; 860 | } 861 | 862 | &--3 { 863 | animation-delay: 4.9s !important; 864 | } 865 | 866 | &--5 { 867 | animation-delay: 4.3s !important; 868 | } 869 | 870 | &--6 { 871 | animation-delay: 4.1s !important; 872 | } 873 | 874 | &--7 { 875 | animation-delay: 3.8s !important; 876 | } 877 | 878 | &--8 { 879 | animation-delay: 3.5s !important; 880 | } 881 | 882 | @keyframes flower__g-front__leaf-ans { 883 | 0% { 884 | transform: rotate(10deg) scale(0); 885 | } 886 | } 887 | 888 | @keyframes flower__g-front__leaf-left-ans { 889 | 0% { 890 | transform: rotateY(-180deg) rotate(5deg) scale(0); 891 | } 892 | } 893 | } 894 | 895 | &__leaf { 896 | width: 10vmin; 897 | height: 10vmin; 898 | border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%; 899 | box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2); 900 | background-image: linear-gradient( 901 | to bottom left, 902 | transparent, 903 | var(--dark-color) 904 | ), 905 | linear-gradient( 906 | to bottom right, 907 | #159faa 50%, 908 | transparent 50%, 909 | transparent 910 | ); 911 | 912 | -webkit-mask-image: linear-gradient( 913 | to bottom right, 914 | #159faa 50%, 915 | transparent 50%, 916 | transparent 917 | ); 918 | mask-image: linear-gradient( 919 | to bottom right, 920 | #159faa 50%, 921 | transparent 50%, 922 | transparent 923 | ); 924 | } 925 | } 926 | 927 | &__g-fr { 928 | position: absolute; 929 | bottom: -4vmin; 930 | left: vmin; 931 | transform-origin: bottom left; 932 | z-index: 10; 933 | 934 | animation: flower__g-fr-ans 2s linear infinite; 935 | 936 | @keyframes flower__g-fr-ans { 937 | 0%, 938 | 100% { 939 | transform: rotate(2deg); 940 | } 941 | 50% { 942 | transform: rotate(4deg); 943 | } 944 | } 945 | 946 | .leaf { 947 | width: 30vmin; 948 | height: 50vmin; 949 | border-top-left-radius: 100%; 950 | border-left: 2vmin solid #079097; 951 | -webkit-mask-image: linear-gradient(to top, transparent 25%, #079097 50%); 952 | position: relative; 953 | z-index: 1; 954 | } 955 | 956 | &__leaf { 957 | position: absolute; 958 | top: 0; 959 | left: 0; 960 | width: 10vmin; 961 | height: 10vmin; 962 | border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%; 963 | box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2); 964 | background-image: linear-gradient( 965 | to bottom left, 966 | transparent, 967 | var(--dark-color) 98% 968 | ), 969 | linear-gradient( 970 | to bottom right, 971 | #23f0ff 45%, 972 | transparent 50%, 973 | transparent 974 | ); 975 | 976 | -webkit-mask-image: linear-gradient( 977 | 135deg, 978 | #159faa 40%, 979 | transparent 50%, 980 | transparent 981 | ); 982 | 983 | &--1 { 984 | left: 20vmin; 985 | transform: rotate(45deg); 986 | 987 | animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; 988 | 989 | @keyframes flower__g-fr-leaft-ans-1 { 990 | 0% { 991 | transform-origin: left; 992 | transform: rotate(45deg) scale(0); 993 | } 994 | } 995 | } 996 | 997 | &--2 { 998 | left: 12vmin; 999 | top: -7vmin; 1000 | transform: rotate(25deg) rotateY(-180deg); 1001 | animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards; 1002 | } 1003 | 1004 | &--3 { 1005 | left: 15vmin; 1006 | top: 6vmin; 1007 | transform: rotate(55deg); 1008 | animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; 1009 | } 1010 | 1011 | &--4 { 1012 | left: 6vmin; 1013 | top: -2vmin; 1014 | transform: rotate(25deg) rotateY(-180deg); 1015 | animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; 1016 | } 1017 | 1018 | &--5 { 1019 | left: 10vmin; 1020 | top: 14vmin; 1021 | transform: rotate(55deg); 1022 | animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; 1023 | 1024 | @keyframes flower__g-fr-leaft-ans-5 { 1025 | 0% { 1026 | transform-origin: left; 1027 | transform: rotate(55deg) scale(0); 1028 | } 1029 | } 1030 | } 1031 | 1032 | &--6 { 1033 | left: 0vmin; 1034 | top: 6vmin; 1035 | transform: rotate(25deg) rotateY(-180deg); 1036 | animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; 1037 | 1038 | @keyframes flower__g-fr-leaft-ans-6 { 1039 | 0% { 1040 | transform-origin: right; 1041 | transform: rotate(25deg) rotateY(-180deg) scale(0); 1042 | } 1043 | } 1044 | } 1045 | 1046 | &--7 { 1047 | left: 5vmin; 1048 | top: 22vmin; 1049 | transform: rotate(45deg); 1050 | animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards; 1051 | 1052 | @keyframes flower__g-fr-leaft-ans-7 { 1053 | 0% { 1054 | transform-origin: left; 1055 | transform: rotate(45deg) scale(0); 1056 | } 1057 | } 1058 | } 1059 | 1060 | &--8 { 1061 | left: -4vmin; 1062 | top: 15vmin; 1063 | transform: rotate(15deg) rotateY(-180deg); 1064 | animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; 1065 | 1066 | @keyframes flower__g-fr-leaft-ans-8 { 1067 | 0% { 1068 | transform-origin: right; 1069 | transform: rotate(15deg) rotateY(-180deg) scale(0); 1070 | } 1071 | } 1072 | } 1073 | } 1074 | } 1075 | } 1076 | 1077 | .long-g { 1078 | position: absolute; 1079 | bottom: 25vmin; 1080 | left: -42vmin; 1081 | transform-origin: bottom left; 1082 | 1083 | &--1 { 1084 | bottom: 0vmin; 1085 | transform: scale(0.8) rotate(-5deg); 1086 | 1087 | .leaf { 1088 | -webkit-mask-image: linear-gradient( 1089 | to top, 1090 | transparent 40%, 1091 | #079097 80% 1092 | ) !important; 1093 | 1094 | &--1 { 1095 | --w: 5vmin; 1096 | --h: 60vmin; 1097 | left: -2vmin; 1098 | transform: rotate(3deg) rotateY(-180deg); 1099 | } 1100 | } 1101 | } 1102 | 1103 | &--2, 1104 | &--3 { 1105 | bottom: -3vmin; 1106 | left: -35vmin; 1107 | transform-origin: center; 1108 | transform: scale(0.6) rotateX(60deg); 1109 | 1110 | .leaf { 1111 | -webkit-mask-image: linear-gradient( 1112 | to top, 1113 | transparent 50%, 1114 | #079097 80% 1115 | ) !important; 1116 | 1117 | &--1 { 1118 | left: -1vmin; 1119 | transform: rotateY(-180deg); 1120 | } 1121 | } 1122 | } 1123 | 1124 | &--3 { 1125 | left: -17vmin; 1126 | bottom: 0vmin; 1127 | .leaf { 1128 | -webkit-mask-image: linear-gradient( 1129 | to top, 1130 | transparent 40%, 1131 | #079097 80% 1132 | ) !important; 1133 | } 1134 | } 1135 | 1136 | &--4 { 1137 | left: 25vmin; 1138 | bottom: -3vmin; 1139 | transform-origin: center; 1140 | transform: scale(0.6) rotateX(60deg); 1141 | 1142 | .leaf { 1143 | -webkit-mask-image: linear-gradient( 1144 | to top, 1145 | transparent 50%, 1146 | #079097 80% 1147 | ) !important; 1148 | } 1149 | } 1150 | 1151 | &--5 { 1152 | left: 42vmin; 1153 | bottom: 0vmin; 1154 | transform: scale(0.8) rotate(2deg); 1155 | } 1156 | 1157 | &--6 { 1158 | left: 0vmin; 1159 | bottom: -20vmin; 1160 | z-index: 100; 1161 | filter: blur(0.3vmin); 1162 | transform: scale(0.8) rotate(2deg); 1163 | } 1164 | 1165 | &--7 { 1166 | left: 35vmin; 1167 | bottom: 20vmin; 1168 | z-index: -1; 1169 | filter: blur(0.3vmin); 1170 | transform: scale(0.6) rotate(2deg); 1171 | opacity: 0.7; 1172 | } 1173 | 1174 | .leaf { 1175 | --w: 15vmin; 1176 | --h: 40vmin; 1177 | --c: #1aaa15; 1178 | 1179 | position: absolute; 1180 | bottom: 0; 1181 | width: var(--w); 1182 | height: var(--h); 1183 | border-top-left-radius: 100%; 1184 | border-left: 2vmin solid var(--c); 1185 | -webkit-mask-image: linear-gradient( 1186 | to top, 1187 | transparent 20%, 1188 | var(--dark-color) 1189 | ); 1190 | 1191 | transform-origin: bottom center; 1192 | 1193 | &--0 { 1194 | left: 2vmin; 1195 | animation: leaf-ans-1 4s linear infinite; 1196 | } 1197 | 1198 | &--1 { 1199 | --w: 5vmin; 1200 | --h: 60vmin; 1201 | animation: leaf-ans-1 4s linear infinite; 1202 | } 1203 | 1204 | &--2 { 1205 | --w: 10vmin; 1206 | --h: 40vmin; 1207 | left: -0.5vmin; 1208 | bottom: 5vmin; 1209 | transform-origin: bottom left; 1210 | transform: rotateY(-180deg); 1211 | animation: leaf-ans-2 3s linear infinite; 1212 | } 1213 | 1214 | &--3 { 1215 | --w: 5vmin; 1216 | --h: 30vmin; 1217 | left: -1vmin; 1218 | bottom: 3.2vmin; 1219 | transform-origin: bottom left; 1220 | transform: rotate(-10deg) rotateY(-180deg); 1221 | animation: leaf-ans-3 3s linear infinite; 1222 | } 1223 | } 1224 | } 1225 | 1226 | @keyframes leaf-ans-1 { 1227 | 0%, 1228 | 100% { 1229 | transform: rotate(-5deg) scale(1); 1230 | } 1231 | 1232 | 50% { 1233 | transform: rotate(5deg) scale(1.1); 1234 | } 1235 | } 1236 | 1237 | @keyframes leaf-ans-2 { 1238 | 0%, 1239 | 100% { 1240 | transform: rotateY(-180deg) rotate(5deg); 1241 | } 1242 | 1243 | 50% { 1244 | transform: rotateY(-180deg) rotate(0deg) scale(1.1); 1245 | } 1246 | } 1247 | 1248 | @keyframes leaf-ans-3 { 1249 | 0%, 1250 | 100% { 1251 | transform: rotate(-10deg) rotateY(-180deg); 1252 | } 1253 | 1254 | 50% { 1255 | transform: rotate(-20deg) rotateY(-180deg); 1256 | } 1257 | } 1258 | 1259 | .grow-ans { 1260 | animation: grow-ans 2s var(--d) backwards; 1261 | } 1262 | 1263 | @keyframes grow-ans { 1264 | 0% { 1265 | transform: scale(0); 1266 | opacity: 0; 1267 | } 1268 | } 1269 | 1270 | @keyframes light-ans { 1271 | 0% { 1272 | opacity: 0; 1273 | transform: translateY(0vmin); 1274 | } 1275 | 1276 | 25% { 1277 | opacity: 1; 1278 | transform: translateY(-5vmin) translateX(-2vmin); 1279 | } 1280 | 1281 | 50% { 1282 | opacity: 1; 1283 | transform: translateY(-15vmin) translateX(2vmin); 1284 | filter: blur(0.2vmin); 1285 | } 1286 | 1287 | 75% { 1288 | transform: translateY(-20vmin) translateX(-2vmin); 1289 | filter: blur(0.2vmin); 1290 | } 1291 | 1292 | 100% { 1293 | transform: translateY(-30vmin); 1294 | opacity: 0; 1295 | filter: blur(1vmin); 1296 | } 1297 | } 1298 | 1299 | @keyframes moving-flower-1 { 1300 | 0%, 1301 | 100% { 1302 | transform: rotate(2deg); 1303 | } 1304 | 1305 | 50% { 1306 | transform: rotate(-2deg); 1307 | } 1308 | } 1309 | 1310 | @keyframes moving-flower-2 { 1311 | 0%, 1312 | 100% { 1313 | transform: rotate(18deg); 1314 | } 1315 | 1316 | 50% { 1317 | transform: rotate(14deg); 1318 | } 1319 | } 1320 | 1321 | @keyframes moving-flower-3 { 1322 | 0%, 1323 | 100% { 1324 | transform: rotate(-18deg); 1325 | } 1326 | 1327 | 50% { 1328 | transform: rotate(-20deg) rotateY(-10deg); 1329 | } 1330 | } 1331 | 1332 | @keyframes blooming-leaf-right { 1333 | 0% { 1334 | transform-origin: left; 1335 | transform: rotate(70deg) rotateY(30deg) scale(0); 1336 | } 1337 | } 1338 | 1339 | @keyframes blooming-leaf-left { 1340 | 0% { 1341 | transform-origin: right; 1342 | transform: rotate(-70deg) rotateY(30deg) scale(0); 1343 | } 1344 | } 1345 | 1346 | @keyframes grow-flower-tree { 1347 | 0% { 1348 | height: 0; 1349 | border-radius: 1vmin; 1350 | } 1351 | } 1352 | 1353 | @keyframes blooming-flower { 1354 | 0% { 1355 | transform: scale(0); 1356 | } 1357 | } 1358 | 1359 | @keyframes moving-grass { 1360 | 0%, 1361 | 100% { 1362 | transform: rotate(-48deg) rotateY(40deg); 1363 | } 1364 | 1365 | 50% { 1366 | transform: rotate(-50deg) rotateY(40deg); 1367 | } 1368 | } 1369 | 1370 | @keyframes moving-grass--2 { 1371 | 0%, 1372 | 100% { 1373 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 1374 | } 1375 | 1376 | 50% { 1377 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); 1378 | } 1379 | } 1380 | 1381 | .growing-grass { 1382 | animation: growing-grass-ans 1s 2s backwards; 1383 | } 1384 | 1385 | @keyframes growing-grass-ans { 1386 | 0% { 1387 | transform: scale(0); 1388 | } 1389 | } 1390 | 1391 | .not-loaded * { 1392 | animation-play-state: paused !important; 1393 | } 1394 | --------------------------------------------------------------------------------