bg.less 18 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. .windmill {
  2. position: absolute;
  3. width: 100%;
  4. height: 100vh;
  5. margin: auto;
  6. overflow: hidden;
  7. background: #649ECD;
  8. left: 0;
  9. top: 0;
  10. z-index: 100;
  11. }
  12. .windmill__sun {
  13. position: absolute;
  14. height: 30px;
  15. width: 30px;
  16. top: 6%;
  17. left: 20%;
  18. border-radius: 100%;
  19. background: #B6E2FF;
  20. box-shadow: 0 0 300px 80px #B6E2FF, 0 0 200px 40px #B6E2FF, 0 0 50px 10px #B6E2FF;
  21. }
  22. .windmill__slice-4 {
  23. position: absolute;
  24. width: 0;
  25. height: 0;
  26. top: 179px;
  27. left: 105px;
  28. border-left: 300px solid transparent;
  29. border-right: 300px solid transparent;
  30. border-bottom: 250px solid #649ECD;
  31. }
  32. .windmill__slice-4:after {
  33. content: '';
  34. position: absolute;
  35. width: 0;
  36. height: 0;
  37. top: 55px;
  38. left: -70px;
  39. border-left: 180px solid transparent;
  40. border-right: 180px solid transparent;
  41. border-bottom: 195px solid #649ECD;
  42. }
  43. .windmill__slice-4:before {
  44. content: '';
  45. position: absolute;
  46. width: 0;
  47. height: 0;
  48. top: 80px;
  49. left: 60px;
  50. border-left: 120px solid transparent;
  51. border-right: 120px solid transparent;
  52. border-bottom: 170px solid #649ECD;
  53. }
  54. .windmill__slice-4 div {
  55. position: absolute;
  56. width: 0;
  57. height: 0;
  58. top: 95px;
  59. left: -392px;
  60. border-left: 170px solid transparent;
  61. border-right: 170px solid transparent;
  62. border-bottom: 155px solid #649ECD;
  63. }
  64. .windmill__slice-4 div:after {
  65. content: '';
  66. position: absolute;
  67. width: 0;
  68. height: 0;
  69. top: 20px;
  70. left: -115px;
  71. border-left: 150px solid transparent;
  72. border-right: 150px solid transparent;
  73. border-bottom: 135px solid #649ECD;
  74. }
  75. .windmill__slice-4 div:before {
  76. content: '';
  77. position: absolute;
  78. width: 0;
  79. height: 0;
  80. top: -38px;
  81. left: -105px;
  82. border-left: 220px solid transparent;
  83. border-right: 220px solid transparent;
  84. border-bottom: 195px solid #649ECD;
  85. }
  86. .windmill__slice-3 {
  87. position: absolute;
  88. width: 0;
  89. height: 0;
  90. bottom: 0;
  91. left: -15px;
  92. border-left: 320px solid transparent;
  93. border-right: 320px solid transparent;
  94. border-bottom: 150px solid #6096C4;
  95. }
  96. .windmill__slice-3:after {
  97. content: '';
  98. position: absolute;
  99. width: 0;
  100. height: 0;
  101. top: 23px;
  102. left: -78px;
  103. border-left: 3px solid transparent;
  104. border-right: 3px solid transparent;
  105. border-bottom: 15px solid #6096C4;
  106. }
  107. .windmill__slice-3:before {
  108. content: '';
  109. position: absolute;
  110. width: 0;
  111. height: 0;
  112. top: 31px;
  113. left: 89px;
  114. border-left: 3px solid transparent;
  115. border-right: 3px solid transparent;
  116. border-bottom: 15px solid #6096C4;
  117. }
  118. .windmill__slice-3 .windmill__tree-right {
  119. position: absolute;
  120. width: 0;
  121. height: 0;
  122. top: 2px;
  123. left: 33px;
  124. border-left: 5px solid transparent;
  125. border-right: 5px solid transparent;
  126. border-bottom: 20px solid #6096C4;
  127. opacity: .5;
  128. }
  129. .windmill__slice-3 .windmill__tree-right:after {
  130. content: '';
  131. position: absolute;
  132. width: 0;
  133. height: 0;
  134. top: 15px;
  135. left: 36px;
  136. border-left: 7px solid transparent;
  137. border-right: 7px solid transparent;
  138. border-bottom: 25px solid #6096C4;
  139. }
  140. .windmill__slice-3 .windmill__tree-right:before {
  141. content: '';
  142. position: absolute;
  143. width: 0;
  144. height: 0;
  145. top: -2px;
  146. left: -19px;
  147. border-left: 4px solid transparent;
  148. border-right: 4px solid transparent;
  149. border-bottom: 16px solid #6096C4;
  150. }
  151. .windmill__slice-3 .windmill__tree-left {
  152. position: absolute;
  153. width: 0;
  154. height: 0;
  155. top: -4px;
  156. left: -30px;
  157. border-left: 5px solid transparent;
  158. border-right: 5px solid transparent;
  159. border-bottom: 20px solid #6096C4;
  160. }
  161. .windmill__slice-3 .windmill__tree-left:after {
  162. content: '';
  163. position: absolute;
  164. width: 0;
  165. height: 0;
  166. top: 11px;
  167. left: -12px;
  168. border-left: 3px solid transparent;
  169. border-right: 3px solid transparent;
  170. border-bottom: 15px solid #6096C4;
  171. }
  172. .windmill__slice-3 .windmill__tree-left:before {
  173. content: '';
  174. position: absolute;
  175. width: 0;
  176. height: 0;
  177. top: 19px;
  178. left: -46px;
  179. border-left: 4px solid transparent;
  180. border-right: 4px solid transparent;
  181. border-bottom: 20px solid #6096C4;
  182. }
  183. .windmill__slice-2 {
  184. position: absolute;
  185. width: 0;
  186. height: 0;
  187. bottom: 0;
  188. left: 205px;
  189. border-left: 250px solid transparent;
  190. border-right: 250px solid transparent;
  191. border-bottom: 110px solid #508BB3;
  192. }
  193. .windmill__slice-2:after {
  194. content: '';
  195. position: absolute;
  196. width: 0;
  197. height: 0;
  198. top: 13px;
  199. left: 46px;
  200. border-left: 2px solid transparent;
  201. border-right: 2px solid transparent;
  202. border-bottom: 10px solid #508BB3;
  203. }
  204. .windmill__slice-2:before {
  205. content: '';
  206. position: absolute;
  207. width: 0;
  208. height: 0;
  209. top: 10px;
  210. left: 39px;
  211. border-left: 3px solid transparent;
  212. border-right: 3px solid transparent;
  213. border-bottom: 12px solid #508BB3;
  214. }
  215. .windmill__slice-2 .windmill__tree-right {
  216. position: absolute;
  217. width: 0;
  218. height: 0;
  219. top: 6px;
  220. left: -45px;
  221. border-left: 4px solid transparent;
  222. border-right: 4px solid transparent;
  223. border-bottom: 17px #508BB3;
  224. }
  225. .windmill__slice-2 .windmill__tree-right:after {
  226. content: '';
  227. position: absolute;
  228. width: 0;
  229. height: 0;
  230. top: -16px;
  231. left: 13px;
  232. border-left: 6px solid transparent;
  233. border-right: 6px solid transparent;
  234. border-bottom: 24px solid #508BB3;
  235. }
  236. .windmill__slice-2 .windmill__tree-right:before {
  237. content: '';
  238. position: absolute;
  239. width: 0;
  240. height: 0;
  241. top: -11px;
  242. left: 26px;
  243. border-left: 3px solid transparent;
  244. border-right: 3px solid transparent;
  245. border-bottom: 15px solid #508BB3;
  246. }
  247. .windmill__slice-2 .windmill__tree-middle {
  248. position: absolute;
  249. width: 0;
  250. height: 0;
  251. top: 26px;
  252. left: -88px;
  253. border-left: 4px solid transparent;
  254. border-right: 4px solid transparent;
  255. border-bottom: 15px solid #508BB3;
  256. }
  257. .windmill__slice-2 .windmill__tree-middle:after {
  258. content: '';
  259. position: absolute;
  260. width: 0;
  261. height: 0;
  262. top: -13px;
  263. left: 7px;
  264. border-left: 5px solid transparent;
  265. border-right: 5px solid transparent;
  266. border-bottom: 24px solid #508BB3;
  267. }
  268. .windmill__slice-2 .windmill__tree-middle:before {
  269. content: '';
  270. position: absolute;
  271. width: 0;
  272. height: 0;
  273. top: -18px;
  274. left: 21px;
  275. border-left: 5px solid transparent;
  276. border-right: 5px solid transparent;
  277. border-bottom: 28px solid #508BB3;
  278. }
  279. .windmill__slice-2 .windmill__tree-left {
  280. position: absolute;
  281. width: 0;
  282. height: 0;
  283. top: 41px;
  284. left: -151px;
  285. border-left: 7px solid transparent;
  286. border-right: 7px solid transparent;
  287. border-bottom: 30px solid #508BB3;
  288. }
  289. .windmill__slice-2 .windmill__tree-left:after {
  290. content: '';
  291. position: absolute;
  292. width: 0;
  293. height: 0;
  294. top: 2px;
  295. left: 8px;
  296. border-left: 5px solid transparent;
  297. border-right: 5px solid transparent;
  298. border-bottom: 20px solid #508BB3;
  299. }
  300. .windmill__slice-2 .windmill__tree-left:before {
  301. content: '';
  302. position: absolute;
  303. width: 0;
  304. height: 0;
  305. top: -10px;
  306. left: 19px;
  307. border-left: 7px solid transparent;
  308. border-right: 7px solid transparent;
  309. border-bottom: 28px solid #508BB3;
  310. }
  311. .windmill__slice-1 {
  312. position: absolute;
  313. width: 0;
  314. height: 0;
  315. top: 190px;
  316. left: 0px;
  317. border-right: 400px solid transparent;
  318. border-bottom: 315px solid #14222D;
  319. }
  320. .windmill__slice-1:after {
  321. content: '';
  322. position: absolute;
  323. width: 0;
  324. height: 0;
  325. top: 150px;
  326. left: 390px;
  327. border-left: 230px solid transparent;
  328. border-right: 520px solid transparent;
  329. border-bottom: 175px solid #14222D;
  330. }
  331. .windmill__slice-1:before {
  332. content: '';
  333. position: absolute;
  334. width: 400px;
  335. height: 80px;
  336. top: 240px;
  337. left: 180px;
  338. border-radius: 100% 100% 0 0;
  339. background: #14222D;
  340. }
  341. .windmill__slice-1 .windmill__tree-right {
  342. position: absolute;
  343. width: 0;
  344. height: 0;
  345. top: 112px;
  346. left: 747px;
  347. border-left: 26px solid transparent;
  348. border-right: 26px solid transparent;
  349. border-bottom: 120px solid #14222D;
  350. }
  351. .windmill__slice-1 .windmill__tree-right:after {
  352. content: '';
  353. position: absolute;
  354. width: 10px;
  355. height: 20px;
  356. top: 60px;
  357. left: -49px;
  358. background: #14222D;
  359. }
  360. .windmill__slice-1 .windmill__tree-right:before {
  361. content: '';
  362. position: absolute;
  363. width: 50px;
  364. height: 50px;
  365. top: 14px;
  366. left: -69px;
  367. background: #14222D;
  368. border-radius: 50% 0 50% 50%;
  369. transform: rotate(-45deg);
  370. }
  371. .windmill__slice-1 .windmill__tree-left {
  372. position: absolute;
  373. width: 0;
  374. height: 0;
  375. top: -42px;
  376. left: 40px;
  377. border-left: 26px solid transparent;
  378. border-right: 26px solid transparent;
  379. border-bottom: 120px solid #14222D;
  380. }
  381. .windmill__slice-1 .windmill__tree-left:after {
  382. content: '';
  383. position: absolute;
  384. width: 0;
  385. height: 0;
  386. top: 187px;
  387. left: 461px;
  388. border-left: 20px solid transparent;
  389. border-right: 20px solid transparent;
  390. border-bottom: 80px solid #14222D;
  391. }
  392. .windmill__slice-1 .windmill__tree-left:before {
  393. content: '';
  394. position: absolute;
  395. width: 0;
  396. height: 0;
  397. top: 88px;
  398. left: 47px;
  399. border-left: 16px solid transparent;
  400. border-right: 16px solid transparent;
  401. border-bottom: 75px solid #14222D;
  402. }
  403. .windmill__clouds {
  404. position: absolute;
  405. }
  406. .windmill__cloud {
  407. position: absolute;
  408. width: 200px;
  409. height: 40px;
  410. border-radius: 40px;
  411. background: #B6E2FF;
  412. opacity: .3;
  413. }
  414. .windmill__cloud:before {
  415. content: '';
  416. position: absolute;
  417. top: -20px;
  418. left: 30px;
  419. width: 100px;
  420. height: 30px;
  421. border-radius: 20px;
  422. background: #B6E2FF;
  423. }
  424. .windmill__cloud:after {
  425. content: '';
  426. position: absolute;
  427. top: -30px;
  428. left: 70px;
  429. width: 100px;
  430. height: 50px;
  431. border-radius: 50px;
  432. background: #B6E2FF;
  433. }
  434. .windmill__cloud:nth-child(1) {
  435. top: 140px;
  436. left: 150px;
  437. animation: cloud 58s linear infinite;
  438. animation-delay: -20s;
  439. }
  440. .windmill__cloud:nth-child(2) {
  441. top: 210px;
  442. left: 30px;
  443. transform: scale(0.4);
  444. animation: cloud 60s linear infinite;
  445. animation-delay: -12s;
  446. }
  447. .windmill__cloud:nth-child(3) {
  448. top: 270px;
  449. left: 650px;
  450. transform: scale(0.3);
  451. animation: cloud 62s linear infinite;
  452. animation-delay: -10s;
  453. }
  454. .windmill__cloud:nth-child(4) {
  455. top: 260px;
  456. left: 360px;
  457. transform: scale(0.8);
  458. animation: cloud 64s linear infinite;
  459. animation-delay: -30s;
  460. }
  461. .windmill__cloud:nth-child(5) {
  462. top: 90px;
  463. left: 500px;
  464. transform: scale(0.5);
  465. animation: cloud 56s linear infinite;
  466. animation-delay: -25s;
  467. }
  468. .windmill__cloud:nth-child(6) {
  469. top: 140px;
  470. left: 710px;
  471. transform: scale(0.7);
  472. animation: cloud 60s linear infinite;
  473. animation-delay: -50s;
  474. }
  475. .windmill__windmill {
  476. position: absolute;
  477. bottom: -30px;
  478. left: 50px;
  479. width: 75px;
  480. border-style: solid;
  481. border-color: #1e3b52 transparent;
  482. border-width: 0 10px 135px;
  483. }
  484. .windmill__windmill:after {
  485. content: '';
  486. position: absolute;
  487. width: 8px;
  488. height: 8px;
  489. top: 7px;
  490. left: 25px;
  491. transform: rotate(45deg);
  492. background: #B6E2FF;
  493. }
  494. .windmill__windmill:before {
  495. content: '';
  496. position: absolute;
  497. width: 0;
  498. height: 0;
  499. top: -48px;
  500. left: -12px;
  501. border-left: 40px solid transparent;
  502. border-right: 40px solid transparent;
  503. border-bottom: 50px solid #153650;
  504. }
  505. .windmill__blades {
  506. position: absolute;
  507. top: 6px;
  508. left: 30px;
  509. animation: blades 12s linear infinite;
  510. }
  511. .windmill__blade {
  512. position: absolute;
  513. height: 80px;
  514. width: 24px;
  515. border: 2px solid #14222D;
  516. }
  517. .windmill__blade:after {
  518. content: '';
  519. position: absolute;
  520. top: 15px;
  521. left: -2px;
  522. height: 14px;
  523. width: 24px;
  524. border: 2px solid #14222D;
  525. }
  526. .windmill__blade:before {
  527. content: '';
  528. position: absolute;
  529. top: 47px;
  530. left: -2px;
  531. height: 14px;
  532. width: 24px;
  533. border: 2px solid #14222D;
  534. }
  535. .windmill__blade:nth-child(1) {
  536. top: -84px;
  537. left: -13px;
  538. }
  539. .windmill__blade:nth-child(2) {
  540. bottom: -84px;
  541. left: -13px;
  542. }
  543. .windmill__blade:nth-child(3) {
  544. transform: rotate(90deg);
  545. top: -43px;
  546. left: -56px;
  547. }
  548. .windmill__blade:nth-child(4) {
  549. transform: rotate(90deg);
  550. top: -43px;
  551. left: 28px;
  552. }
  553. .windmill__snowflakes {
  554. position: absolute;
  555. }
  556. .windmill__snowflake {
  557. position: absolute;
  558. background: #B6E2FF;
  559. transform: rotate(45deg);
  560. top: -200px;
  561. animation: snowflake 30s linear infinite;
  562. opacity: .5;
  563. }
  564. .windmill__snowflake:before {
  565. content: '';
  566. position: absolute;
  567. background: #B6E2FF;
  568. }
  569. .windmill__snowflake:after {
  570. content: '';
  571. position: absolute;
  572. background: #B6E2FF;
  573. }
  574. .windmill__snowflake:nth-child(1) {
  575. height: 5px;
  576. width: 5px;
  577. left: 100px;
  578. animation-delay: 20s;
  579. }
  580. .windmill__snowflake:nth-child(1):before {
  581. height: 7px;
  582. width: 7px;
  583. left: -15px;
  584. top: 137px;
  585. }
  586. .windmill__snowflake:nth-child(1):after {
  587. height: 5px;
  588. width: 5px;
  589. left: 40px;
  590. top: 320px;
  591. }
  592. .windmill__snowflake:nth-child(2) {
  593. height: 5px;
  594. width: 5px;
  595. left: 200px;
  596. animation-delay: 10s;
  597. }
  598. .windmill__snowflake:nth-child(2):before {
  599. height: 5px;
  600. width: 5px;
  601. left: -157px;
  602. top: 226px;
  603. }
  604. .windmill__snowflake:nth-child(2):after {
  605. height: 6px;
  606. width: 6px;
  607. left: -51px;
  608. top: 381px;
  609. }
  610. .windmill__snowflake:nth-child(3) {
  611. height: 5px;
  612. width: 5px;
  613. left: 300px;
  614. }
  615. .windmill__snowflake:nth-child(3):before {
  616. height: 6px;
  617. width: 6px;
  618. left: -155px;
  619. top: 186px;
  620. }
  621. .windmill__snowflake:nth-child(3):after {
  622. height: 5px;
  623. width: 5px;
  624. left: -57px;
  625. top: 109px;
  626. }
  627. .windmill__snowflake:nth-child(4) {
  628. height: 8px;
  629. width: 8px;
  630. left: 400px;
  631. animation-delay: 14s;
  632. }
  633. .windmill__snowflake:nth-child(4):before {
  634. height: 8px;
  635. width: 8px;
  636. left: -96px;
  637. top: 215px;
  638. }
  639. .windmill__snowflake:nth-child(4):after {
  640. height: 6px;
  641. width: 6px;
  642. left: -206px;
  643. top: 71px;
  644. }
  645. .windmill__snowflake:nth-child(5) {
  646. height: 7px;
  647. width: 7px;
  648. left: 500px;
  649. animation-delay: -24s;
  650. }
  651. .windmill__snowflake:nth-child(5):before {
  652. height: 7px;
  653. width: 7px;
  654. left: -244px;
  655. top: 96px;
  656. }
  657. .windmill__snowflake:nth-child(5):after {
  658. height: 7px;
  659. width: 7px;
  660. left: 100px;
  661. top: 217px;
  662. }
  663. .windmill__snowflake:nth-child(6) {
  664. height: 8px;
  665. width: 8px;
  666. left: 600px;
  667. }
  668. .windmill__snowflake:nth-child(6):before {
  669. height: 8px;
  670. width: 8px;
  671. left: 110px;
  672. top: 150px;
  673. }
  674. .windmill__snowflake:nth-child(6):after {
  675. height: 8px;
  676. width: 8px;
  677. left: 30px;
  678. top: 276px;
  679. }
  680. .windmill__snowflake:nth-child(7) {
  681. height: 6px;
  682. width: 6px;
  683. left: 700px;
  684. animation-delay: -22s;
  685. }
  686. .windmill__snowflake:nth-child(7):before {
  687. height: 6px;
  688. width: 6px;
  689. left: 247px;
  690. top: 220px;
  691. }
  692. .windmill__snowflake:nth-child(7):after {
  693. height: 6px;
  694. width: 6px;
  695. left: 143px;
  696. top: 306px;
  697. }
  698. .windmill__snowflake:nth-child(8) {
  699. height: 6px;
  700. width: 6px;
  701. left: 800px;
  702. animation-delay: -17s;
  703. }
  704. .windmill__snowflake:nth-child(8):before {
  705. height: 6px;
  706. width: 6px;
  707. left: 10px;
  708. top: 343px;
  709. }
  710. .windmill__snowflake:nth-child(8):after {
  711. height: 8px;
  712. width: 8px;
  713. left: -105px;
  714. top: 239px;
  715. }
  716. .windmill__snowflake:nth-child(9) {
  717. height: 7px;
  718. width: 7px;
  719. left: 900px;
  720. }
  721. .windmill__snowflake:nth-child(9):before {
  722. height: 8px;
  723. width: 8px;
  724. left: 133px;
  725. top: 211px;
  726. }
  727. .windmill__snowflake:nth-child(9):after {
  728. height: 5px;
  729. width: 5px;
  730. left: -65px;
  731. top: 243px;
  732. }
  733. .windmill__snowflake:nth-child(10) {
  734. height: 7px;
  735. width: 7px;
  736. left: 1000px;
  737. animation-delay: 17s;
  738. }
  739. .windmill__snowflake:nth-child(10):before {
  740. height: 7px;
  741. width: 7px;
  742. left: -119px;
  743. top: 207px;
  744. }
  745. .windmill__snowflake:nth-child(10):after {
  746. height: 7px;
  747. width: 7px;
  748. left: 166px;
  749. top: 4px;
  750. }
  751. .windmill__snowflake:nth-child(11) {
  752. height: 4px;
  753. width: 4px;
  754. left: 150px;
  755. animation-delay: -22s;
  756. }
  757. .windmill__snowflake:nth-child(11):before {
  758. height: 7px;
  759. width: 7px;
  760. left: -117px;
  761. top: 259px;
  762. }
  763. .windmill__snowflake:nth-child(11):after {
  764. height: 9px;
  765. width: 9px;
  766. left: 230px;
  767. top: 81px;
  768. }
  769. .windmill__snowflake:nth-child(12) {
  770. height: 7px;
  771. width: 7px;
  772. left: 250px;
  773. }
  774. .windmill__snowflake:nth-child(12):before {
  775. height: 6px;
  776. width: 6px;
  777. left: -17px;
  778. top: 226px;
  779. }
  780. .windmill__snowflake:nth-child(12):after {
  781. height: 8px;
  782. width: 8px;
  783. left: 33px;
  784. top: 64px;
  785. }
  786. .windmill__snowflake:nth-child(13) {
  787. height: 5px;
  788. width: 5px;
  789. left: 350px;
  790. animation-delay: 19s;
  791. }
  792. .windmill__snowflake:nth-child(13):before {
  793. height: 7px;
  794. width: 7px;
  795. left: -138px;
  796. top: 192px;
  797. }
  798. .windmill__snowflake:nth-child(13):after {
  799. height: 7px;
  800. width: 7px;
  801. left: 241px;
  802. top: 20px;
  803. }
  804. .windmill__snowflake:nth-child(14) {
  805. height: 4px;
  806. width: 4px;
  807. left: 450px;
  808. animation-delay: 15s;
  809. }
  810. .windmill__snowflake:nth-child(14):before {
  811. height: 7px;
  812. width: 7px;
  813. left: -173px;
  814. top: 222px;
  815. }
  816. .windmill__snowflake:nth-child(14):after {
  817. height: 5px;
  818. width: 5px;
  819. left: 236px;
  820. top: 27px;
  821. }
  822. .windmill__snowflake:nth-child(15) {
  823. height: 7px;
  824. width: 7px;
  825. left: 550px;
  826. }
  827. .windmill__snowflake:nth-child(15):before {
  828. height: 7px;
  829. width: 7px;
  830. left: -131px;
  831. top: 241px;
  832. }
  833. .windmill__snowflake:nth-child(15):after {
  834. height: 7px;
  835. width: 7px;
  836. left: 426px;
  837. top: 128px;
  838. }
  839. .windmill__snowflake:nth-child(16) {
  840. height: 5px;
  841. width: 5px;
  842. left: 650px;
  843. animation-delay: 22s;
  844. }
  845. .windmill__snowflake:nth-child(16):before {
  846. height: 7px;
  847. width: 7px;
  848. left: -154px;
  849. top: 232px;
  850. }
  851. .windmill__snowflake:nth-child(16):after {
  852. height: 6px;
  853. width: 6px;
  854. left: 126px;
  855. top: 123px;
  856. }
  857. .windmill__snowflake:nth-child(17) {
  858. height: 5px;
  859. width: 5px;
  860. left: 750px;
  861. animation-delay: -8s;
  862. }
  863. .windmill__snowflake:nth-child(17):before {
  864. height: 7px;
  865. width: 7px;
  866. left: -178px;
  867. top: 284px;
  868. }
  869. .windmill__snowflake:nth-child(17):after {
  870. height: 6px;
  871. width: 6px;
  872. left: 150px;
  873. top: 208px;
  874. }
  875. .windmill__snowflake:nth-child(18) {
  876. height: 5px;
  877. width: 5px;
  878. left: 850px;
  879. }
  880. .windmill__snowflake:nth-child(18):before {
  881. height: 7px;
  882. width: 7px;
  883. left: -165px;
  884. top: 247px;
  885. }
  886. .windmill__snowflake:nth-child(18):after {
  887. height: 6px;
  888. width: 6px;
  889. left: 110px;
  890. top: 216px;
  891. }
  892. .windmill__snowflake:nth-child(19) {
  893. height: 5px;
  894. width: 5px;
  895. left: 950px;
  896. animation-delay: -13s;
  897. }
  898. .windmill__snowflake:nth-child(19):before {
  899. height: 7px;
  900. width: 7px;
  901. left: -14px;
  902. top: 362px;
  903. }
  904. .windmill__snowflake:nth-child(19):after {
  905. height: 6px;
  906. width: 6px;
  907. left: 226px;
  908. top: 243px;
  909. }
  910. .windmill__snowflake:nth-child(20) {
  911. height: 5px;
  912. width: 5px;
  913. left: 50px;
  914. animation-delay: -9s;
  915. }
  916. .windmill__snowflake:nth-child(20):before {
  917. height: 7px;
  918. width: 7px;
  919. left: -194px;
  920. top: 255px;
  921. }
  922. .windmill__snowflake:nth-child(20):after {
  923. height: 6px;
  924. width: 6px;
  925. left: 246px;
  926. top: 233px;
  927. }
  928. .windmill__snowflake:nth-child(21) {
  929. height: 7px;
  930. width: 7px;
  931. left: 600px;
  932. }
  933. .windmill__snowflake:nth-child(21):before {
  934. height: 7px;
  935. width: 7px;
  936. left: -248px;
  937. top: 218px;
  938. }
  939. .windmill__snowflake:nth-child(21):after {
  940. height: 6px;
  941. width: 6px;
  942. left: 133px;
  943. top: 101px;
  944. }
  945. .windmill__snowflake:nth-child(22) {
  946. height: 5px;
  947. width: 5px;
  948. left: 800px;
  949. animation-delay: -11s;
  950. }
  951. .windmill__snowflake:nth-child(22):before {
  952. height: 7px;
  953. width: 7px;
  954. left: -44px;
  955. top: 342px;
  956. }
  957. .windmill__snowflake:nth-child(22):after {
  958. height: 6px;
  959. width: 6px;
  960. left: 126px;
  961. top: 123px;
  962. }
  963. /* Анимации */
  964. @keyframes blades {
  965. 100% {
  966. transform: rotate(-360deg);
  967. }
  968. }
  969. @keyframes cloud {
  970. 0% {
  971. transform: translateX(750px);
  972. }
  973. 100% {
  974. transform: translateX(-450px);
  975. }
  976. }
  977. @keyframes snowflake {
  978. 0% {
  979. transform: rotate(45deg) translateX(0) translateY(116px);
  980. }
  981. 20% {
  982. transform: rotate(45deg) translateX(-10px) translateY(232px);
  983. }
  984. 40% {
  985. transform: rotate(45deg) translateX(-50px) translateY(348px);
  986. }
  987. 60% {
  988. transform: rotate(45deg) translateX(-150px) translateY(464px);
  989. }
  990. 80% {
  991. transform: rotate(45deg) translateX(-100px) translateY(580px);
  992. }
  993. 100% {
  994. transform: rotate(45deg) translateX(-50px) translateY(700px);
  995. }
  996. }