├── main.js ├── img └── flowers.png ├── README.md ├── index.html ├── css ├── style.css ├── main.css.map └── main.css ├── flower.html └── scss └── main.scss /main.js: -------------------------------------------------------------------------------- 1 | onload = () =>{ 2 | document.body.classList.remove("container"); 3 | }; 4 | -------------------------------------------------------------------------------- /img/flowers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voidenterpriseid/kejutan-bunga/HEAD/img/flowers.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kado 2 | -Flower code from: https://codepen.io/mdusmanansari/pen/BamepLe 3 | 4 | 5 | # Description 6 | Flower code tiktok trend 7 | 8 | Responsive Web -- bisa langsung disesuikan di file css --> style.css 9 | 10 | # Author 11 | - Flower Code : Md Usman Ansari (@MdUsmanAnsari) 12 | - Index Code : Septian Dwi Cahyo (@Septiandwica) 13 | 14 | Thanks to codepan and mdusmanansari 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Flowers 10 | 11 | 12 |
13 | 14 | H 15 | A 16 | L 17 | L 18 | O 19 |
20 |
21 | Aku ada hadiah spesial buat kamu!! 22 |
23 |
24 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,900&display=swap'); 2 | *{ 3 | font-family: 'Poppins',cursive; 4 | } 5 | body{ 6 | color: azure; 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: black; 14 | } 15 | .greetings{ 16 | font-size: 6rem; 17 | font-weight: 900; 18 | } 19 | .greetings > span{ 20 | animation: glow 2.5s ease-in-out infinite; 21 | } 22 | @keyframes glow{ 23 | 0%, 100%{ 24 | color: #fff; 25 | text-shadow: 0 0 12px #39c6d6, 0 0 50px #39c6d6, 0 0 100px #39c6d6; 26 | } 27 | 10%, 90%{ 28 | color: #111; 29 | text-shadow: none; 30 | } 31 | } 32 | .greetings > span:nth-child(2){ 33 | animation-delay: .2s ; 34 | } 35 | .greetings > span:nth-child(3){ 36 | animation-delay: .4s ; 37 | } 38 | .greetings > span:nth-child(4){ 39 | animation-delay: .6s; 40 | } 41 | .greetings > span:nth-child(5){ 42 | animation-delay: .8s; 43 | } 44 | 45 | .description{ 46 | font-size: 1.5rem; 47 | margin-bottom: 20px; 48 | } 49 | 50 | .button a{ 51 | text-decoration: none; 52 | font-size: 1rem; 53 | color: #111; 54 | } 55 | 56 | @media screen and (max-width:574px){ 57 | .greetings{ 58 | display: block; 59 | font-size: 3rem; 60 | font-weight: 500; 61 | text-align: center; 62 | } 63 | .description{ 64 | font-size: 1rem; 65 | } 66 | 67 | .button a{ 68 | font-size: .5rem; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../scss/main.scss","main.css"],"names":[],"mappings":"AAAA;;;EAGE,UAAA;EACA,SAAA;EACA,sBAAA;ACCF;;ADEA;EACE,kBAAA;ACCF;;ADEA;EACE,aAAA;EACA,qBAAA;EACA,uBAAA;EACA,iBAAA;EACA,mCAAA;EACA,gBAAA;EACA,mBAAA;ACCF;;ADEA;EACE,eAAA;EACA,SAAA;EACA,MAAA;EACA,2BAAA;EACA,WAAA;EACA,YAAA;EACA,qBAAA;EACA,uiBAAA;ACCF;;ADiCA;EACE,kBAAA;EACA,qBAAA;AC9BF;;ADiCA;EACE,kBAAA;EACA,cAAA;EACA,+BAAA;EACA,WAAA;EAEA,gBAAA;AC/BF;ADiCE;EACE,qDAAA;UAAA,6CAAA;AC/BJ;ADgCI;EAGE,cAAA;EACA,6BAHQ;UAGR,qBAHQ;AC7Bd;ADmCQ;EACE,qEAAA;UAAA,6DAAA;ACjCV;ADoCQ;EACE,qEAAA;UAAA,6DAAA;AClCV;ADqCQ;EACE,oEAAA;UAAA,4DAAA;ACnCV;ADsCQ;EACE,kEAAA;UAAA,0DAAA;ACpCV;ADuCQ;EACE,qEAAA;UAAA,6DAAA;ACrCV;ADwCQ;EACE,kEAAA;UAAA,0DAAA;ACtCV;AD4CE;EACE,SAAA;EACA,wBAAA;EACA,qDAAA;UAAA,6CAAA;AC1CJ;AD2CI;EACE,cAAA;EACA,6BAAA;UAAA,qBAAA;ACzCN;AD4CQ;EACE,qEAAA;UAAA,6DAAA;AC1CV;AD6CQ;EACE,qEAAA;UAAA,6DAAA;AC3CV;AD8CQ;EACE,oEAAA;UAAA,4DAAA;AC5CV;AD+CQ;EACE,oEAAA;UAAA,4DAAA;AC7CV;ADmDE;EACE,SAAA;EACA,yBAAA;EACA,qDAAA;UAAA,6CAAA;ACjDJ;ADkDI;EACE,6BAAA;UAAA,qBAAA;AChDN;ADkDQ;EACE,qEAAA;UAAA,6DAAA;AChDV;ADmDQ;EACE,qEAAA;UAAA,6DAAA;ACjDV;ADoDQ;EACE,oEAAA;UAAA,4DAAA;AClDV;ADqDQ;EACE,oEAAA;UAAA,4DAAA;ACnDV;ADyDE;EACE,kBAAA;EACA,+CAAA;UAAA,uCAAA;ACvDJ;AD6DM;EAEE,6BAAA;UAAA,qBAAA;AC5DR;AD0DM;EAEE,6BAAA;UAAA,qBAAA;ACzDR;ADuDM;EAEE,6BAAA;UAAA,qBAAA;ACtDR;AD0DI;EACE,WAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,iCAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,oBAAA;ACxDN;AD4DE;EACE,kBAAA;EACA,SAAA;EACA,SAAA;EACA,YAAA;EACA,cAAA;EACA,8CAAA;EACA,yBAAA;EACA,2DAAA;EACA,+BAAA;EACA,YAAA;EACA,oDAAA;AC1DJ;AD4DI;EACE,6DAAA;AC1DN;AD6DI;EACE,8CAAA;AC3DN;AD8DI;EACE,4DAAA;AC5DN;AD+DI;EACE,YAAA;EACA,aAAA;EACA,6BAAA;EACA,uCAAA;EACA,2DAAA;EACA,2DAAA;EACA,UAAA;EACA,YAAA;AC7DN;ADiEE;EACE,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,sBAAA;AC/DJ;ADiEI;EACE,WAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,UAAA;EACA,WAAA;EACA,sBAAA;EACA,41DAAA;AC/DN;AD4KE;EACE,cAAA;EACA,cAAA;EACA,iKAAA;EAOA,4CAAA;EACA,gDAAA;UAAA,wCAAA;AChLJ;ADkLI;EACE,UAAA;EACA,2BAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;EACA,iCAAA;EACA,mCAAA;EACA,2EAAA;AChLN;ADsLM;EACE,uCAAA;ACpLR;ADuLM;EACE,QAAA;EACA,uCAAA;ACrLR;ADwLM;EAGE,0BAAA;EACA,4BAAA;EACA,gCAAA;EACA,oCAAA;EACA,WAAA;EACA,QAAA;EACA,wCAAA;ACxLR;AD2LM;EACE,QAAA;ACzLR;AD4LM;EACE,MAAA;EACA,sBAAA;EACA,kDAAA;AC1LR;AD6LM;EACE,QAAA;EACA,WAAA;EACA,uBAAA;EACA,mDAAA;AC3LR;ADgME;EACE,kBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,qBAAA;EACA,yDAAA;UAAA,iDAAA;AC9LJ;ADgMI;EACE,yBAAA;AC9LN;ADiMI;EACE,YAAA;EACA,2BAAA;UAAA,mBAAA;AC/LN;ADkMI;EACE,WAAA;EACA,6BAAA;UAAA,qBAAA;AChMN;ADmMI;EACE,YAAA;EACA,6BAAA;UAAA,qBAAA;ACjMN;ADoMI;EACE,WAAA;EACA,6BAAA;UAAA,qBAAA;AClMN;ADqMI;EACE,YAAA;EACA,6BAAA;UAAA,qBAAA;ACnMN;ADsMI;EACE,YAAA;EACA,2BAAA;UAAA,mBAAA;ACpMN;ADuMI;EACE,WAAA;EACA,2BAAA;UAAA,mBAAA;ACrMN;ADwMI;EACE,YAAA;EACA,6BAAA;UAAA,qBAAA;ACtMN;AD0ME;EACE,YAAA;EACA,iBAAA;EAEA,kBAAA;EACA,cAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;EACA,WAAA;EACA,+BAAA;EACA,wCAAA;ACzMJ;AD2MI;EACE,kDAAA;UAAA,0CAAA;ACzMN;AD4MI;EACE,WAAA;EACA,cAAA;EACA,mEAAA;EACA,YAAA;EACA,UAAA;EACA,uDAAA;UAAA,+CAAA;AC1MN;AD6MI;EACE,YAAA;EACA,cAAA;EACA,6BAAA;EACA,0CAAA;EACA,+BAAA;EACA,wBAAA;AC3MN;AD8MI;EACE,gBAAA;EACA,oBAAA;EACA,cAAA;EACA,gEAAA;AC5MN;AD+MI;EACE,cAAA;EACA,kBAAA;EACA,8BAAA;EACA,mBAAA;EACA,mCAAA;EACA,oCAAA;EACA,iFAAA;EAMA,YAAA;AClNN;ADsNM;EACE,QAAA;EACA,SAAA;EACA,aAAA;EACA,yBAAA;EACA,yDAAA;UAAA,iDAAA;ACpNR;ADqNQ;EACE;IACE,6BAAA;IACA,kCAAA;ECnNV;AACF;AD+MQ;EACE;IACE,6BAAA;IACA,kCAAA;ECnNV;AACF;ADuNM;EACE,QAAA;EACA,WAAA;EACA,aAAA;EACA,wBAAA;EACA,gEAAA;UAAA,wDAAA;ACrNR;ADsNQ;EACE;IACE,8BAAA;IACA,iCAAA;ECpNV;AACF;ADgNQ;EACE;IACE,8BAAA;IACA,iCAAA;ECpNV;AACF;ADwNM;EACE,OAAA;EACA,SAAA;EACA,aAAA;EACA,yCAAA;EACA,gEAAA;UAAA,wDAAA;ACtNR;ADuNQ;EACE;IACE,6BAAA;IACA,kDAAA;ECrNV;AACF;ADiNQ;EACE;IACE,6BAAA;IACA,kDAAA;ECrNV;AACF;ADyNM;EACE,OAAA;EACA,WAAA;EACA,aAAA;EACA,uBAAA;EACA,8DAAA;UAAA,sDAAA;ACvNR;ADwNQ;EACE;IACE,8BAAA;IACA,gCAAA;ECtNV;AACF;ADkNQ;EACE;IACE,8BAAA;IACA,gCAAA;ECtNV;AACF;AD0NM;EACE,QAAA;EACA,SAAA;EACA,cAAA;EACA,yCAAA;EACA,gEAAA;UAAA,wDAAA;ACxNR;ADyNQ;EACE;IACE,6BAAA;IACA,kDAAA;ECvNV;AACF;ADmNQ;EACE;IACE,6BAAA;IACA,kDAAA;ECvNV;AACF;AD2NM;EACE,QAAA;EACA,WAAA;EACA,cAAA;EACA,wBAAA;EACA,gEAAA;UAAA,wDAAA;ACzNR;AD0NQ;EACE;IACE,8BAAA;IACA,iCAAA;ECxNV;AACF;ADoNQ;EACE;IACE,8BAAA;IACA,iCAAA;ECxNV;AACF;AD4NM;EACE,QAAA;EACA,SAAA;EACA,cAAA;EACA,yBAAA;EACA,gEAAA;UAAA,wDAAA;AC1NR;AD2NQ;EACE;IACE,6BAAA;IACA,kCAAA;ECzNV;AACF;ADqNQ;EACE;IACE,6BAAA;IACA,kCAAA;ECzNV;AACF;AD6NM;EACE,QAAA;EACA,WAAA;EACA,cAAA;EACA,wBAAA;EACA,gEAAA;UAAA,wDAAA;AC3NR;AD4NQ;EACE;IACE,8BAAA;IACA,iCAAA;EC1NV;AACF;ADsNQ;EACE;IACE,8BAAA;IACA,iCAAA;EC1NV;AACF;AD+NI;EACE,kBAAA;EACA,SAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,qBAAA;EACA,YAAA;AC7NN;ADiOE;EACE,UAAA;EACA,UAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,YAAA;EACA,+BAAA;EACA,yCAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;EACA,uDAAA;UAAA,+CAAA;AC/NJ;ADiOI;EACE;IAEE,yCAAA;EChON;EDmOI;IACE,yCAAA;ECjON;AACF;ADyNI;EACE;IAEE,yCAAA;EChON;EDmOI;IACE,yCAAA;ECjON;AACF;ADoOI;EACE,wBAAA;EACA,6BAAA;EACA,gBAAA;EACA,6BAAA;EACA,oCAAA;EACA,qCAAA;AClON;ADqOI;EACE,eAAA;EACA,cAAA;EACA,+BAAA;EACA,oEAAA;EACA,4CAAA;EACA,6DAAA;UAAA,qDAAA;ACnON;ADuOE;EACE,kBAAA;EACA,aAAA;EACA,YAAA;EACA,6BAAA;EACA,wBAAA;ACrOJ;ADuOI;EACE,aAAA;EACA,cAAA;EACA,4BAAA;EACA,gCAAA;EACA,gFAAA;EAKA,yEAAA;ACzON;AD4OI;EACE,0DAAA;UAAA,kDAAA;AC1ON;AD6OI;EACE,WAAA;EACA,2BAAA;EACA,2DAAA;UAAA,mDAAA;AC3ON;AD6OM;EACE,cAAA;EACA,qBAAA;EACA,YAAA;AC3OR;AD+OI;EACE;IAEE,wBAAA;EC9ON;EDiPI;IACE,wCAAA;EC/ON;AACF;ADuOI;EACE;IAEE,wBAAA;EC9ON;EDiPI;IACE,wCAAA;EC/ON;AACF;ADkPI;EACE;IAEE,wDAAA;ECjPN;EDoPI;IACE,wDAAA;EClPN;AACF;AD0OI;EACE;IAEE,wDAAA;ECjPN;EDoPI;IACE,wDAAA;EClPN;AACF;ADsPE;EACE,kBAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,+BAAA;EACA,oDAAA;EACA,yDAAA;UAAA,iDAAA;ACpPJ;ADsPI;EACE;IAEE,oDAAA;ECrPN;EDuPI;IACE,oDAAA;ECrPN;AACF;AD8OI;EACE;IAEE,oDAAA;ECrPN;EDuPI;IACE,oDAAA;ECrPN;AACF;ADwPI;EACE,cAAA;EACA,cAAA;EACA,iFAAA;EAMA,kBAAA;AC3PN;AD8PI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,wBAAA;AC5PN;AD8PM;EACE,WAAA;EACA,wCAAA;EACA,sEAAA;UAAA,8DAAA;AC5PR;AD+PM;EACE,iEAAA;UAAA,yDAAA;AC7PR;ADgQM;EACE,WAAA;EACA,qBAAA;EACA,iFAAA;UAAA,yEAAA;AC9PR;ADiQM;EACE,WAAA;EACA,iDAAA;EACA,wFAAA;UAAA,gFAAA;AC/PR;ADkQM;EACE,WAAA;EACA,sEAAA;UAAA,8DAAA;AChQR;ADmQM;EACE,WAAA;EACA,iDAAA;EACA,wFAAA;UAAA,gFAAA;ACjQR;ADoQM;EACE;IACE,oCAAA;EClQR;AACF;AD+PM;EACE;IACE,oCAAA;EClQR;AACF;ADqQM;EAEE,UAAA;ACpQR;ADuQM;EAEE,YAAA;ACtQR;ADyQM;EACE,wCAAA;UAAA,gCAAA;ACvQR;AD0QM;EACE,wCAAA;UAAA,gCAAA;ACxQR;AD2QM;EACE,wCAAA;UAAA,gCAAA;ACzQR;AD4QM;EACE,wCAAA;UAAA,gCAAA;AC1QR;AD6QM;EACE,wCAAA;UAAA,gCAAA;AC3QR;AD8QM;EACE,wCAAA;UAAA,gCAAA;AC5QR;AD+QM;EACE;IACE,iCAAA;EC7QR;AACF;AD0QM;EACE;IACE,iCAAA;EC7QR;AACF;ADgRM;EACE;IACE,iDAAA;EC9QR;AACF;AD2QM;EACE;IACE,iDAAA;EC9QR;AACF;ADkRI;EACE,aAAA;EACA,cAAA;EACA,8CAAA;EACA,yDAAA;EACA,8JAAA;EAYA,+FAAA;EAMA,uFAAA;AChSN;ADySE;EACE,kBAAA;EACA,cAAA;EACA,UAAA;EACA,6BAAA;EACA,WAAA;EAEA,sDAAA;UAAA,8CAAA;ACxSJ;AD0SI;EACE;IAEE,uBAAA;ECzSN;ED2SI;IACE,uBAAA;ECzSN;AACF;ADkSI;EACE;IAEE,uBAAA;ECzSN;ED2SI;IACE,uBAAA;ECzSN;AACF;AD4SI;EACE,aAAA;EACA,cAAA;EACA,4BAAA;EACA,gCAAA;EACA,yEAAA;EACA,kBAAA;EACA,UAAA;AC1SN;AD6SI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,8CAAA;EACA,yDAAA;EACA,kKAAA;EAYA,sFAAA;ACtTN;AD6TM;EACE,YAAA;EACA,wBAAA;EAEA,sEAAA;UAAA,8DAAA;AC5TR;AD8TQ;EACE;IACE,sBAAA;IACA,iCAAA;EC5TV;AACF;ADwTQ;EACE;IACE,sBAAA;IACA,iCAAA;EC5TV;AACF;ADgUM;EACE,YAAA;EACA,WAAA;EACA,yCAAA;EACA,oEAAA;UAAA,4DAAA;AC9TR;ADiUM;EACE,YAAA;EACA,UAAA;EACA,wBAAA;EACA,sEAAA;UAAA,8DAAA;AC/TR;ADkUM;EACE,WAAA;EACA,WAAA;EACA,yCAAA;EACA,sEAAA;UAAA,8DAAA;AChUR;ADmUM;EACE,YAAA;EACA,WAAA;EACA,wBAAA;EACA,sEAAA;UAAA,8DAAA;ACjUR;ADmUQ;EACE;IACE,sBAAA;IACA,iCAAA;ECjUV;AACF;AD6TQ;EACE;IACE,sBAAA;IACA,iCAAA;ECjUV;AACF;ADqUM;EACE,WAAA;EACA,UAAA;EACA,yCAAA;EACA,sEAAA;UAAA,8DAAA;ACnUR;ADqUQ;EACE;IACE,uBAAA;IACA,kDAAA;ECnUV;AACF;AD+TQ;EACE;IACE,uBAAA;IACA,kDAAA;ECnUV;AACF;ADuUM;EACE,WAAA;EACA,WAAA;EACA,wBAAA;EACA,oEAAA;UAAA,4DAAA;ACrUR;ADuUQ;EACE;IACE,sBAAA;IACA,iCAAA;ECrUV;AACF;ADiUQ;EACE;IACE,sBAAA;IACA,iCAAA;ECrUV;AACF;ADyUM;EACE,YAAA;EACA,WAAA;EACA,yCAAA;EACA,sEAAA;UAAA,8DAAA;ACvUR;ADyUQ;EACE;IACE,uBAAA;IACA,kDAAA;ECvUV;AACF;ADmUQ;EACE;IACE,uBAAA;IACA,kDAAA;ECvUV;AACF;;AD8UA;EACE,kBAAA;EACA,cAAA;EACA,aAAA;EACA,6BAAA;AC3UF;AD6UE;EACE,aAAA;EACA,mCAAA;AC3UJ;AD6UI;EACE,oFAAA;AC3UN;ADiVM;EACE,UAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;AC/UR;ADoVE;EAEE,cAAA;EACA,aAAA;EACA,wBAAA;EACA,oCAAA;ACnVJ;ADqVI;EACE,oFAAA;ACnVN;ADyVM;EACE,YAAA;EACA,2BAAA;ACvVR;AD4VE;EACE,aAAA;EACA,aAAA;AC1VJ;AD2VI;EACE,oFAAA;ACzVN;ADiWE;EACE,YAAA;EACA,cAAA;EACA,wBAAA;EACA,oCAAA;AC/VJ;ADiWI;EACE,oFAAA;AC/VN;ADuWE;EACE,YAAA;EACA,aAAA;EACA,kCAAA;ACrWJ;ADwWE;EACE,WAAA;EACA,eAAA;EACA,YAAA;EACA,qBAAA;EACA,kCAAA;ACtWJ;ADyWE;EACE,YAAA;EACA,cAAA;EACA,WAAA;EACA,qBAAA;EACA,kCAAA;EACA,YAAA;ACvWJ;AD0WE;EACE,WAAA;EACA,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;EACA,4BAAA;EACA,iCAAA;EACA,+EAAA;EAMA,+BAAA;AC9WJ;ADgXI;EACE,WAAA;EACA,gDAAA;UAAA,wCAAA;AC9WN;ADiXI;EACE,UAAA;EACA,WAAA;EACA,gDAAA;UAAA,wCAAA;AC/WN;ADkXI;EACE,WAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,6BAAA;EACA,2BAAA;EACA,gDAAA;UAAA,wCAAA;AChXN;ADmXI;EACE,UAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,6BAAA;EACA,0CAAA;EACA,gDAAA;UAAA,wCAAA;ACjXN;;ADsXA;EACE;IAEE,iCAAA;ECpXF;EDuXA;IACE,kCAAA;ECrXF;AACF;;AD6WA;EACE;IAEE,iCAAA;ECpXF;EDuXA;IACE,kCAAA;ECrXF;AACF;ADwXA;EACE;IAEE,wCAAA;ECvXF;ED0XA;IACE,mDAAA;ECxXF;AACF;ADgXA;EACE;IAEE,wCAAA;ECvXF;ED0XA;IACE,mDAAA;ECxXF;AACF;AD2XA;EACE;IAEE,0CAAA;EC1XF;ED6XA;IACE,0CAAA;EC3XF;AACF;ADmXA;EACE;IAEE,0CAAA;EC1XF;ED6XA;IACE,0CAAA;EC3XF;AACF;AD8XA;EACE,iDAAA;UAAA,yCAAA;AC5XF;;AD+XA;EACE;IACE,mBAAA;IACA,UAAA;EC5XF;AACF;;ADwXA;EACE;IACE,mBAAA;IACA,UAAA;EC5XF;AACF;AD+XA;EACE;IACE,UAAA;IACA,4BAAA;EC7XF;EDgYA;IACE,UAAA;IACA,gDAAA;EC9XF;EDiYA;IACE,UAAA;IACA,gDAAA;IACA,qBAAA;EC/XF;EDkYA;IACE,iDAAA;IACA,qBAAA;EChYF;EDmYA;IACE,8BAAA;IACA,UAAA;IACA,mBAAA;ECjYF;AACF;ADuWA;EACE;IACE,UAAA;IACA,4BAAA;EC7XF;EDgYA;IACE,UAAA;IACA,gDAAA;EC9XF;EDiYA;IACE,UAAA;IACA,gDAAA;IACA,qBAAA;EC/XF;EDkYA;IACE,iDAAA;IACA,qBAAA;EChYF;EDmYA;IACE,8BAAA;IACA,UAAA;IACA,mBAAA;ECjYF;AACF;ADoYA;EACE;IAEE,uBAAA;ECnYF;EDsYA;IACE,wBAAA;ECpYF;AACF;AD4XA;EACE;IAEE,uBAAA;ECnYF;EDsYA;IACE,wBAAA;ECpYF;AACF;ADuYA;EACE;IAEE,wBAAA;ECtYF;EDyYA;IACE,wBAAA;ECvYF;AACF;AD+XA;EACE;IAEE,wBAAA;ECtYF;EDyYA;IACE,wBAAA;ECvYF;AACF;AD0YA;EACE;IAEE,yBAAA;ECzYF;ED4YA;IACE,yCAAA;EC1YF;AACF;ADkYA;EACE;IAEE,yBAAA;ECzYF;ED4YA;IACE,yCAAA;EC1YF;AACF;AD6YA;EACE;IACE,sBAAA;IACA,gDAAA;EC3YF;AACF;ADuYA;EACE;IACE,sBAAA;IACA,gDAAA;EC3YF;AACF;AD8YA;EACE;IACE,uBAAA;IACA,iDAAA;EC5YF;AACF;ADwYA;EACE;IACE,uBAAA;IACA,iDAAA;EC5YF;AACF;AD+YA;EACE;IACE,SAAA;IACA,oBAAA;EC7YF;AACF;ADyYA;EACE;IACE,SAAA;IACA,oBAAA;EC7YF;AACF;ADgZA;EACE;IACE,mBAAA;EC9YF;AACF;AD2YA;EACE;IACE,mBAAA;EC9YF;AACF;ADiZA;EACE;IAEE,wCAAA;EChZF;EDmZA;IACE,wCAAA;ECjZF;AACF;ADyYA;EACE;IAEE,wCAAA;EChZF;EDmZA;IACE,wCAAA;ECjZF;AACF;ADoZA;EACE;IAEE,mEAAA;ECnZF;EDsZA;IACE,mEAAA;ECpZF;AACF;AD4YA;EACE;IAEE,mEAAA;ECnZF;EDsZA;IACE,mEAAA;ECpZF;AACF;ADuZA;EACE,oDAAA;UAAA,4CAAA;ACrZF;;ADwZA;EACE;IACE,mBAAA;ECrZF;AACF;;ADkZA;EACE;IACE,mBAAA;ECrZF;AACF;ADwZA;EACE,+CAAA;UAAA,uCAAA;ACtZF","file":"main.css"} -------------------------------------------------------------------------------- /flower.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | flowers 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | 134 |
135 |
136 |
137 |
138 |
139 | 140 |
141 |
142 |
143 |
144 |
145 | 146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
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 | -------------------------------------------------------------------------------- /scss/main.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 | .container * { 1392 | animation-play-state: paused !important; 1393 | } 1394 | -------------------------------------------------------------------------------- /css/main.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 | 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(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(0, 255, 250), rgb(240, 240, 240)); 32 | } 33 | 34 | .flowers { 35 | position: relative; 36 | transform: scale(0.9); 37 | } 38 | 39 | .flower { 40 | position: absolute; 41 | bottom: 10vmin; 42 | transform-origin: bottom center; 43 | z-index: 10; 44 | --fl-speed: 0.8s; 45 | } 46 | .flower--1 { 47 | -webkit-animation: moving-flower-1 4s linear infinite; 48 | animation: moving-flower-1 4s linear infinite; 49 | } 50 | .flower--1 .flower__line { 51 | height: 70vmin; 52 | -webkit-animation-delay: 0.3s; 53 | animation-delay: 0.3s; 54 | } 55 | .flower--1 .flower__line__leaf--1 { 56 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; 57 | animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; 58 | } 59 | .flower--1 .flower__line__leaf--2 { 60 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; 61 | animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; 62 | } 63 | .flower--1 .flower__line__leaf--3 { 64 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; 65 | animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; 66 | } 67 | .flower--1 .flower__line__leaf--4 { 68 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1s backwards; 69 | animation: blooming-leaf-left var(--fl-speed) 1s backwards; 70 | } 71 | .flower--1 .flower__line__leaf--5 { 72 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; 73 | animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; 74 | } 75 | .flower--1 .flower__line__leaf--6 { 76 | -webkit-animation: blooming-leaf-left var(--fl-speed) 2s backwards; 77 | animation: blooming-leaf-left var(--fl-speed) 2s backwards; 78 | } 79 | .flower--2 { 80 | left: 50%; 81 | transform: rotate(20deg); 82 | -webkit-animation: moving-flower-2 4s linear infinite; 83 | animation: moving-flower-2 4s linear infinite; 84 | } 85 | .flower--2 .flower__line { 86 | height: 60vmin; 87 | -webkit-animation-delay: 0.6s; 88 | animation-delay: 0.6s; 89 | } 90 | .flower--2 .flower__line__leaf--1 { 91 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; 92 | animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; 93 | } 94 | .flower--2 .flower__line__leaf--2 { 95 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; 96 | animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; 97 | } 98 | .flower--2 .flower__line__leaf--3 { 99 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.5s backwards; 100 | animation: blooming-leaf-left var(--fl-speed) 1.5s backwards; 101 | } 102 | .flower--2 .flower__line__leaf--4 { 103 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.3s backwards; 104 | animation: blooming-leaf-left var(--fl-speed) 1.3s backwards; 105 | } 106 | .flower--3 { 107 | left: 50%; 108 | transform: rotate(-15deg); 109 | -webkit-animation: moving-flower-3 4s linear infinite; 110 | animation: moving-flower-3 4s linear infinite; 111 | } 112 | .flower--3 .flower__line { 113 | -webkit-animation-delay: 0.9s; 114 | animation-delay: 0.9s; 115 | } 116 | .flower--3 .flower__line__leaf--1 { 117 | -webkit-animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; 118 | animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; 119 | } 120 | .flower--3 .flower__line__leaf--2 { 121 | -webkit-animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; 122 | animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; 123 | } 124 | .flower--3 .flower__line__leaf--3 { 125 | -webkit-animation: blooming-leaf-left var(--fl-speed) 2.1s backwards; 126 | animation: blooming-leaf-left var(--fl-speed) 2.1s backwards; 127 | } 128 | .flower--3 .flower__line__leaf--4 { 129 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.9s backwards; 130 | animation: blooming-leaf-left var(--fl-speed) 1.9s backwards; 131 | } 132 | .flower__leafs { 133 | position: relative; 134 | -webkit-animation: blooming-flower 2s backwards; 135 | animation: blooming-flower 2s backwards; 136 | } 137 | .flower__leafs--1 { 138 | -webkit-animation-delay: 1.1s; 139 | animation-delay: 1.1s; 140 | } 141 | .flower__leafs--2 { 142 | -webkit-animation-delay: 1.4s; 143 | animation-delay: 1.4s; 144 | } 145 | .flower__leafs--3 { 146 | -webkit-animation-delay: 1.7s; 147 | animation-delay: 1.7s; 148 | } 149 | .flower__leafs::after { 150 | content: ""; 151 | position: absolute; 152 | left: 0; 153 | top: 0; 154 | transform: translate(-50%, -100%); 155 | width: 8vmin; 156 | height: 8vmin; 157 | background-color: #6bf0ff; 158 | filter: blur(10vmin); 159 | } 160 | .flower__leaf { 161 | position: absolute; 162 | bottom: 0; 163 | left: 50%; 164 | width: 8vmin; 165 | height: 11vmin; 166 | border-radius: 51% 49% 47% 53%/44% 45% 55% 69%; 167 | background-color: #a7ffee; 168 | background-image: linear-gradient(to top, #54b8aa, #a7ffee); 169 | transform-origin: bottom center; 170 | opacity: 0.9; 171 | box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5); 172 | } 173 | .flower__leaf--1 { 174 | transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); 175 | } 176 | .flower__leaf--2 { 177 | transform: translate(-50%, -4%) rotateX(40deg); 178 | } 179 | .flower__leaf--3 { 180 | transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); 181 | } 182 | .flower__leaf--4 { 183 | width: 8vmin; 184 | height: 8vmin; 185 | transform-origin: bottom left; 186 | border-radius: 4vmin 10vmin 4vmin 4vmin; 187 | transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg); 188 | background-image: linear-gradient(to top, #39c6d6, #a7ffee); 189 | z-index: 1; 190 | opacity: 0.8; 191 | } 192 | .flower__white-circle { 193 | position: absolute; 194 | left: -3.5vmin; 195 | top: -3vmin; 196 | width: 9vmin; 197 | height: 4vmin; 198 | border-radius: 50%; 199 | background-color: #fff; 200 | } 201 | .flower__white-circle::after { 202 | content: ""; 203 | position: absolute; 204 | left: 50%; 205 | top: 45%; 206 | transform: translate(-50%, -50%); 207 | width: 60%; 208 | height: 60%; 209 | border-radius: inherit; 210 | 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)); 211 | } 212 | .flower__line { 213 | height: 55vmin; 214 | width: 1.5vmin; 215 | 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%, #14757a, #39c6d6); 216 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 217 | -webkit-animation: grow-flower-tree 4s backwards; 218 | animation: grow-flower-tree 4s backwards; 219 | } 220 | .flower__line__leaf { 221 | --w: 7vmin; 222 | --h: calc(var(--w) + 2vmin); 223 | position: absolute; 224 | top: 20%; 225 | left: 90%; 226 | width: var(--w); 227 | height: var(--h); 228 | border-top-right-radius: var(--h); 229 | border-bottom-left-radius: var(--h); 230 | background-image: linear-gradient(to top, rgba(20, 117, 122, 0.4), #39c6d6); 231 | } 232 | .flower__line__leaf--1 { 233 | transform: rotate(70deg) rotateY(30deg); 234 | } 235 | .flower__line__leaf--2 { 236 | top: 45%; 237 | transform: rotate(70deg) rotateY(30deg); 238 | } 239 | .flower__line__leaf--3, .flower__line__leaf--4, .flower__line__leaf--6 { 240 | border-top-right-radius: 0; 241 | border-bottom-left-radius: 0; 242 | border-top-left-radius: var(--h); 243 | border-bottom-right-radius: var(--h); 244 | left: -460%; 245 | top: 12%; 246 | transform: rotate(-70deg) rotateY(30deg); 247 | } 248 | .flower__line__leaf--4 { 249 | top: 40%; 250 | } 251 | .flower__line__leaf--5 { 252 | top: 0; 253 | transform-origin: left; 254 | transform: rotate(70deg) rotateY(30deg) scale(0.6); 255 | } 256 | .flower__line__leaf--6 { 257 | top: -2%; 258 | left: -450%; 259 | transform-origin: right; 260 | transform: rotate(-70deg) rotateY(30deg) scale(0.6); 261 | } 262 | .flower__light { 263 | position: absolute; 264 | bottom: 0vmin; 265 | width: 1vmin; 266 | height: 1vmin; 267 | background-color: rgb(255, 251, 0); 268 | border-radius: 50%; 269 | filter: blur(0.2vmin); 270 | -webkit-animation: light-ans 4s linear infinite backwards; 271 | animation: light-ans 4s linear infinite backwards; 272 | } 273 | .flower__light:nth-child(odd) { 274 | background-color: #23f0ff; 275 | } 276 | .flower__light--1 { 277 | left: -2vmin; 278 | -webkit-animation-delay: 1s; 279 | animation-delay: 1s; 280 | } 281 | .flower__light--2 { 282 | left: 3vmin; 283 | -webkit-animation-delay: 0.5s; 284 | animation-delay: 0.5s; 285 | } 286 | .flower__light--3 { 287 | left: -6vmin; 288 | -webkit-animation-delay: 0.3s; 289 | animation-delay: 0.3s; 290 | } 291 | .flower__light--4 { 292 | left: 6vmin; 293 | -webkit-animation-delay: 0.9s; 294 | animation-delay: 0.9s; 295 | } 296 | .flower__light--5 { 297 | left: -1vmin; 298 | -webkit-animation-delay: 1.5s; 299 | animation-delay: 1.5s; 300 | } 301 | .flower__light--6 { 302 | left: -4vmin; 303 | -webkit-animation-delay: 3s; 304 | animation-delay: 3s; 305 | } 306 | .flower__light--7 { 307 | left: 3vmin; 308 | -webkit-animation-delay: 2s; 309 | animation-delay: 2s; 310 | } 311 | .flower__light--8 { 312 | left: -6vmin; 313 | -webkit-animation-delay: 3.5s; 314 | animation-delay: 3.5s; 315 | } 316 | .flower__grass { 317 | --c: #159faa; 318 | --line-w: 1.5vmin; 319 | position: absolute; 320 | bottom: 12vmin; 321 | left: -7vmin; 322 | display: flex; 323 | flex-direction: column; 324 | align-items: flex-end; 325 | z-index: 20; 326 | transform-origin: bottom center; 327 | transform: rotate(-48deg) rotateY(40deg); 328 | } 329 | .flower__grass--1 { 330 | -webkit-animation: moving-grass 2s linear infinite; 331 | animation: moving-grass 2s linear infinite; 332 | } 333 | .flower__grass--2 { 334 | left: 2vmin; 335 | bottom: 10vmin; 336 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 337 | opacity: 0.8; 338 | z-index: 0; 339 | -webkit-animation: moving-grass--2 1.5s linear infinite; 340 | animation: moving-grass--2 1.5s linear infinite; 341 | } 342 | .flower__grass--top { 343 | width: 7vmin; 344 | height: 10vmin; 345 | border-top-right-radius: 100%; 346 | border-right: var(--line-w) solid var(--c); 347 | transform-origin: bottom center; 348 | transform: rotate(-2deg); 349 | } 350 | .flower__grass--bottom { 351 | margin-top: -2px; 352 | width: var(--line-w); 353 | height: 25vmin; 354 | background-image: linear-gradient(to top, transparent, var(--c)); 355 | } 356 | .flower__grass__leaf { 357 | --size: 10vmin; 358 | position: absolute; 359 | width: calc(var(--size) * 2.1); 360 | height: var(--size); 361 | border-top-left-radius: var(--size); 362 | border-top-right-radius: var(--size); 363 | background-image: linear-gradient(to top, transparent, transparent 30%, var(--c)); 364 | z-index: 100; 365 | } 366 | .flower__grass__leaf--1 { 367 | top: -6%; 368 | left: 30%; 369 | --size: 6vmin; 370 | transform: rotate(-20deg); 371 | -webkit-animation: growing-grass-ans--1 2s 2.6s backwards; 372 | animation: growing-grass-ans--1 2s 2.6s backwards; 373 | } 374 | @-webkit-keyframes growing-grass-ans--1 { 375 | 0% { 376 | transform-origin: bottom left; 377 | transform: rotate(-20deg) scale(0); 378 | } 379 | } 380 | @keyframes growing-grass-ans--1 { 381 | 0% { 382 | transform-origin: bottom left; 383 | transform: rotate(-20deg) scale(0); 384 | } 385 | } 386 | .flower__grass__leaf--2 { 387 | top: -5%; 388 | left: -110%; 389 | --size: 6vmin; 390 | transform: rotate(10deg); 391 | -webkit-animation: growing-grass-ans--2 2s 2.4s linear backwards; 392 | animation: growing-grass-ans--2 2s 2.4s linear backwards; 393 | } 394 | @-webkit-keyframes growing-grass-ans--2 { 395 | 0% { 396 | transform-origin: bottom right; 397 | transform: rotate(10deg) scale(0); 398 | } 399 | } 400 | @keyframes growing-grass-ans--2 { 401 | 0% { 402 | transform-origin: bottom right; 403 | transform: rotate(10deg) scale(0); 404 | } 405 | } 406 | .flower__grass__leaf--3 { 407 | top: 5%; 408 | left: 60%; 409 | --size: 8vmin; 410 | transform: rotate(-18deg) rotateX(-20deg); 411 | -webkit-animation: growing-grass-ans--3 2s 2.2s linear backwards; 412 | animation: growing-grass-ans--3 2s 2.2s linear backwards; 413 | } 414 | @-webkit-keyframes growing-grass-ans--3 { 415 | 0% { 416 | transform-origin: bottom left; 417 | transform: rotate(-18deg) rotateX(-20deg) scale(0); 418 | } 419 | } 420 | @keyframes growing-grass-ans--3 { 421 | 0% { 422 | transform-origin: bottom left; 423 | transform: rotate(-18deg) rotateX(-20deg) scale(0); 424 | } 425 | } 426 | .flower__grass__leaf--4 { 427 | top: 6%; 428 | left: -135%; 429 | --size: 8vmin; 430 | transform: rotate(2deg); 431 | -webkit-animation: growing-grass-ans--4 2s 2s linear backwards; 432 | animation: growing-grass-ans--4 2s 2s linear backwards; 433 | } 434 | @-webkit-keyframes growing-grass-ans--4 { 435 | 0% { 436 | transform-origin: bottom right; 437 | transform: rotate(2deg) scale(0); 438 | } 439 | } 440 | @keyframes growing-grass-ans--4 { 441 | 0% { 442 | transform-origin: bottom right; 443 | transform: rotate(2deg) scale(0); 444 | } 445 | } 446 | .flower__grass__leaf--5 { 447 | top: 20%; 448 | left: 60%; 449 | --size: 10vmin; 450 | transform: rotate(-24deg) rotateX(-20deg); 451 | -webkit-animation: growing-grass-ans--5 2s 1.8s linear backwards; 452 | animation: growing-grass-ans--5 2s 1.8s linear backwards; 453 | } 454 | @-webkit-keyframes growing-grass-ans--5 { 455 | 0% { 456 | transform-origin: bottom left; 457 | transform: rotate(-24deg) rotateX(-20deg) scale(0); 458 | } 459 | } 460 | @keyframes growing-grass-ans--5 { 461 | 0% { 462 | transform-origin: bottom left; 463 | transform: rotate(-24deg) rotateX(-20deg) scale(0); 464 | } 465 | } 466 | .flower__grass__leaf--6 { 467 | top: 22%; 468 | left: -180%; 469 | --size: 10vmin; 470 | transform: rotate(10deg); 471 | -webkit-animation: growing-grass-ans--6 2s 1.6s linear backwards; 472 | animation: growing-grass-ans--6 2s 1.6s linear backwards; 473 | } 474 | @-webkit-keyframes growing-grass-ans--6 { 475 | 0% { 476 | transform-origin: bottom right; 477 | transform: rotate(10deg) scale(0); 478 | } 479 | } 480 | @keyframes growing-grass-ans--6 { 481 | 0% { 482 | transform-origin: bottom right; 483 | transform: rotate(10deg) scale(0); 484 | } 485 | } 486 | .flower__grass__leaf--7 { 487 | top: 39%; 488 | left: 70%; 489 | --size: 10vmin; 490 | transform: rotate(-10deg); 491 | -webkit-animation: growing-grass-ans--7 2s 1.4s linear backwards; 492 | animation: growing-grass-ans--7 2s 1.4s linear backwards; 493 | } 494 | @-webkit-keyframes growing-grass-ans--7 { 495 | 0% { 496 | transform-origin: bottom left; 497 | transform: rotate(-10deg) scale(0); 498 | } 499 | } 500 | @keyframes growing-grass-ans--7 { 501 | 0% { 502 | transform-origin: bottom left; 503 | transform: rotate(-10deg) scale(0); 504 | } 505 | } 506 | .flower__grass__leaf--8 { 507 | top: 40%; 508 | left: -215%; 509 | --size: 11vmin; 510 | transform: rotate(10deg); 511 | -webkit-animation: growing-grass-ans--8 2s 1.2s linear backwards; 512 | animation: growing-grass-ans--8 2s 1.2s linear backwards; 513 | } 514 | @-webkit-keyframes growing-grass-ans--8 { 515 | 0% { 516 | transform-origin: bottom right; 517 | transform: rotate(10deg) scale(0); 518 | } 519 | } 520 | @keyframes growing-grass-ans--8 { 521 | 0% { 522 | transform-origin: bottom right; 523 | transform: rotate(10deg) scale(0); 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 | .flower__g-long { 537 | --w: 2vmin; 538 | --h: 6vmin; 539 | --c: #159faa; 540 | position: absolute; 541 | bottom: 10vmin; 542 | left: -3vmin; 543 | transform-origin: bottom center; 544 | transform: rotate(-30deg) rotateY(-20deg); 545 | display: flex; 546 | flex-direction: column; 547 | align-items: flex-end; 548 | -webkit-animation: flower-g-long-ans 3s linear infinite; 549 | animation: flower-g-long-ans 3s linear infinite; 550 | } 551 | @-webkit-keyframes flower-g-long-ans { 552 | 0%, 100% { 553 | transform: rotate(-30deg) rotateY(-20deg); 554 | } 555 | 50% { 556 | transform: rotate(-32deg) rotateY(-20deg); 557 | } 558 | } 559 | @keyframes flower-g-long-ans { 560 | 0%, 100% { 561 | transform: rotate(-30deg) rotateY(-20deg); 562 | } 563 | 50% { 564 | transform: rotate(-32deg) rotateY(-20deg); 565 | } 566 | } 567 | .flower__g-long__top { 568 | top: calc(var(--h) * -1); 569 | width: calc(var(--w) + 1vmin); 570 | height: var(--h); 571 | border-top-right-radius: 100%; 572 | border-right: 0.7vmin solid var(--c); 573 | transform: translate(-0.7vmin, 1vmin); 574 | } 575 | .flower__g-long__bottom { 576 | width: var(--w); 577 | height: 50vmin; 578 | transform-origin: bottom center; 579 | background-image: linear-gradient(to top, transparent 30%, var(--c)); 580 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); 581 | -webkit-clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); 582 | clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); 583 | } 584 | .flower__g-right { 585 | position: absolute; 586 | bottom: 6vmin; 587 | left: -2vmin; 588 | transform-origin: bottom left; 589 | transform: rotate(20deg); 590 | } 591 | .flower__g-right .leaf { 592 | width: 30vmin; 593 | height: 50vmin; 594 | border-top-left-radius: 100%; 595 | border-left: 2vmin solid #079097; 596 | background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%); 597 | -webkit-mask-image: linear-gradient(to top, transparent 30%, #079097 60%); 598 | } 599 | .flower__g-right--1 { 600 | -webkit-animation: flower-g-right-ans 2.5s linear infinite; 601 | animation: flower-g-right-ans 2.5s linear infinite; 602 | } 603 | .flower__g-right--2 { 604 | left: 5vmin; 605 | transform: rotateY(-180deg); 606 | -webkit-animation: flower-g-right-ans--2 3s linear infinite; 607 | animation: flower-g-right-ans--2 3s linear infinite; 608 | } 609 | .flower__g-right--2 .leaf { 610 | height: 75vmin; 611 | filter: blur(0.3vmin); 612 | opacity: 0.8; 613 | } 614 | @-webkit-keyframes flower-g-right-ans { 615 | 0%, 100% { 616 | transform: rotate(20deg); 617 | } 618 | 50% { 619 | transform: rotate(24deg) rotateX(-20deg); 620 | } 621 | } 622 | @keyframes flower-g-right-ans { 623 | 0%, 100% { 624 | transform: rotate(20deg); 625 | } 626 | 50% { 627 | transform: rotate(24deg) rotateX(-20deg); 628 | } 629 | } 630 | @-webkit-keyframes flower-g-right-ans--2 { 631 | 0%, 100% { 632 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); 633 | } 634 | 50% { 635 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); 636 | } 637 | } 638 | @keyframes flower-g-right-ans--2 { 639 | 0%, 100% { 640 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); 641 | } 642 | 50% { 643 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); 644 | } 645 | } 646 | .flower__g-front { 647 | position: absolute; 648 | bottom: 6vmin; 649 | left: 2.5vmin; 650 | z-index: 100; 651 | transform-origin: bottom center; 652 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 653 | -webkit-animation: flower__g-front-ans 2s linear infinite; 654 | animation: flower__g-front-ans 2s linear infinite; 655 | } 656 | @-webkit-keyframes flower__g-front-ans { 657 | 0%, 100% { 658 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 659 | } 660 | 50% { 661 | transform: rotate(-35deg) rotateY(40deg) scale(1.04); 662 | } 663 | } 664 | @keyframes flower__g-front-ans { 665 | 0%, 100% { 666 | transform: rotate(-28deg) rotateY(30deg) scale(1.04); 667 | } 668 | 50% { 669 | transform: rotate(-35deg) rotateY(40deg) scale(1.04); 670 | } 671 | } 672 | .flower__g-front__line { 673 | width: 0.3vmin; 674 | height: 20vmin; 675 | background-image: linear-gradient(to top, transparent, #079097, transparent 100%); 676 | position: relative; 677 | } 678 | .flower__g-front__leaf-wrapper { 679 | position: absolute; 680 | top: 0; 681 | left: 0; 682 | transform-origin: bottom left; 683 | transform: rotate(10deg); 684 | } 685 | .flower__g-front__leaf-wrapper:nth-child(even) { 686 | left: 0vmin; 687 | transform: rotateY(-180deg) rotate(5deg); 688 | -webkit-animation: flower__g-front__leaf-left-ans 1s ease-in backwards; 689 | animation: flower__g-front__leaf-left-ans 1s ease-in backwards; 690 | } 691 | .flower__g-front__leaf-wrapper:nth-child(odd) { 692 | -webkit-animation: flower__g-front__leaf-ans 1s ease-in backwards; 693 | animation: flower__g-front__leaf-ans 1s ease-in backwards; 694 | } 695 | .flower__g-front__leaf-wrapper--1 { 696 | top: -8vmin; 697 | transform: scale(0.7); 698 | -webkit-animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important; 699 | animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important; 700 | } 701 | .flower__g-front__leaf-wrapper--2 { 702 | top: -8vmin; 703 | transform: rotateY(-180deg) scale(0.7) !important; 704 | -webkit-animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 705 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 706 | } 707 | .flower__g-front__leaf-wrapper--3 { 708 | top: -3vmin; 709 | -webkit-animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards; 710 | animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards; 711 | } 712 | .flower__g-front__leaf-wrapper--4 { 713 | top: -3vmin; 714 | transform: rotateY(-180deg) scale(0.9) !important; 715 | -webkit-animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 716 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; 717 | } 718 | @-webkit-keyframes flower__g-front__leaf-left-ans-2 { 719 | 0% { 720 | transform: rotateY(-180deg) scale(0); 721 | } 722 | } 723 | @keyframes flower__g-front__leaf-left-ans-2 { 724 | 0% { 725 | transform: rotateY(-180deg) scale(0); 726 | } 727 | } 728 | .flower__g-front__leaf-wrapper--5, .flower__g-front__leaf-wrapper--6 { 729 | top: 2vmin; 730 | } 731 | .flower__g-front__leaf-wrapper--7, .flower__g-front__leaf-wrapper--8 { 732 | top: 6.5vmin; 733 | } 734 | .flower__g-front__leaf-wrapper--2 { 735 | -webkit-animation-delay: 5.2s !important; 736 | animation-delay: 5.2s !important; 737 | } 738 | .flower__g-front__leaf-wrapper--3 { 739 | -webkit-animation-delay: 4.9s !important; 740 | animation-delay: 4.9s !important; 741 | } 742 | .flower__g-front__leaf-wrapper--5 { 743 | -webkit-animation-delay: 4.3s !important; 744 | animation-delay: 4.3s !important; 745 | } 746 | .flower__g-front__leaf-wrapper--6 { 747 | -webkit-animation-delay: 4.1s !important; 748 | animation-delay: 4.1s !important; 749 | } 750 | .flower__g-front__leaf-wrapper--7 { 751 | -webkit-animation-delay: 3.8s !important; 752 | animation-delay: 3.8s !important; 753 | } 754 | .flower__g-front__leaf-wrapper--8 { 755 | -webkit-animation-delay: 3.5s !important; 756 | animation-delay: 3.5s !important; 757 | } 758 | @-webkit-keyframes flower__g-front__leaf-ans { 759 | 0% { 760 | transform: rotate(10deg) scale(0); 761 | } 762 | } 763 | @keyframes flower__g-front__leaf-ans { 764 | 0% { 765 | transform: rotate(10deg) scale(0); 766 | } 767 | } 768 | @-webkit-keyframes flower__g-front__leaf-left-ans { 769 | 0% { 770 | transform: rotateY(-180deg) rotate(5deg) scale(0); 771 | } 772 | } 773 | @keyframes flower__g-front__leaf-left-ans { 774 | 0% { 775 | transform: rotateY(-180deg) rotate(5deg) scale(0); 776 | } 777 | } 778 | .flower__g-front__leaf { 779 | width: 10vmin; 780 | height: 10vmin; 781 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; 782 | box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2); 783 | background-image: linear-gradient(to bottom left, transparent, var(--dark-color)), linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent); 784 | -webkit-mask-image: linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent); 785 | mask-image: linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent); 786 | } 787 | .flower__g-fr { 788 | position: absolute; 789 | bottom: -4vmin; 790 | left: vmin; 791 | transform-origin: bottom left; 792 | z-index: 10; 793 | -webkit-animation: flower__g-fr-ans 2s linear infinite; 794 | animation: flower__g-fr-ans 2s linear infinite; 795 | } 796 | @-webkit-keyframes flower__g-fr-ans { 797 | 0%, 100% { 798 | transform: rotate(2deg); 799 | } 800 | 50% { 801 | transform: rotate(4deg); 802 | } 803 | } 804 | @keyframes flower__g-fr-ans { 805 | 0%, 100% { 806 | transform: rotate(2deg); 807 | } 808 | 50% { 809 | transform: rotate(4deg); 810 | } 811 | } 812 | .flower__g-fr .leaf { 813 | width: 30vmin; 814 | height: 50vmin; 815 | border-top-left-radius: 100%; 816 | border-left: 2vmin solid #079097; 817 | -webkit-mask-image: linear-gradient(to top, transparent 25%, #079097 50%); 818 | position: relative; 819 | z-index: 1; 820 | } 821 | .flower__g-fr__leaf { 822 | position: absolute; 823 | top: 0; 824 | left: 0; 825 | width: 10vmin; 826 | height: 10vmin; 827 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; 828 | box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2); 829 | background-image: linear-gradient(to bottom left, transparent, var(--dark-color) 98%), linear-gradient(to bottom right, #23f0ff 45%, transparent 50%, transparent); 830 | -webkit-mask-image: linear-gradient(135deg, #159faa 40%, transparent 50%, transparent); 831 | } 832 | .flower__g-fr__leaf--1 { 833 | left: 20vmin; 834 | transform: rotate(45deg); 835 | -webkit-animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; 836 | animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; 837 | } 838 | @-webkit-keyframes flower__g-fr-leaft-ans-1 { 839 | 0% { 840 | transform-origin: left; 841 | transform: rotate(45deg) scale(0); 842 | } 843 | } 844 | @keyframes flower__g-fr-leaft-ans-1 { 845 | 0% { 846 | transform-origin: left; 847 | transform: rotate(45deg) scale(0); 848 | } 849 | } 850 | .flower__g-fr__leaf--2 { 851 | left: 12vmin; 852 | top: -7vmin; 853 | transform: rotate(25deg) rotateY(-180deg); 854 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards; 855 | animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards; 856 | } 857 | .flower__g-fr__leaf--3 { 858 | left: 15vmin; 859 | top: 6vmin; 860 | transform: rotate(55deg); 861 | -webkit-animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; 862 | animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; 863 | } 864 | .flower__g-fr__leaf--4 { 865 | left: 6vmin; 866 | top: -2vmin; 867 | transform: rotate(25deg) rotateY(-180deg); 868 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; 869 | animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; 870 | } 871 | .flower__g-fr__leaf--5 { 872 | left: 10vmin; 873 | top: 14vmin; 874 | transform: rotate(55deg); 875 | -webkit-animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; 876 | animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; 877 | } 878 | @-webkit-keyframes flower__g-fr-leaft-ans-5 { 879 | 0% { 880 | transform-origin: left; 881 | transform: rotate(55deg) scale(0); 882 | } 883 | } 884 | @keyframes flower__g-fr-leaft-ans-5 { 885 | 0% { 886 | transform-origin: left; 887 | transform: rotate(55deg) scale(0); 888 | } 889 | } 890 | .flower__g-fr__leaf--6 { 891 | left: 0vmin; 892 | top: 6vmin; 893 | transform: rotate(25deg) rotateY(-180deg); 894 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; 895 | animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; 896 | } 897 | @-webkit-keyframes flower__g-fr-leaft-ans-6 { 898 | 0% { 899 | transform-origin: right; 900 | transform: rotate(25deg) rotateY(-180deg) scale(0); 901 | } 902 | } 903 | @keyframes flower__g-fr-leaft-ans-6 { 904 | 0% { 905 | transform-origin: right; 906 | transform: rotate(25deg) rotateY(-180deg) scale(0); 907 | } 908 | } 909 | .flower__g-fr__leaf--7 { 910 | left: 5vmin; 911 | top: 22vmin; 912 | transform: rotate(45deg); 913 | -webkit-animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards; 914 | animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards; 915 | } 916 | @-webkit-keyframes flower__g-fr-leaft-ans-7 { 917 | 0% { 918 | transform-origin: left; 919 | transform: rotate(45deg) scale(0); 920 | } 921 | } 922 | @keyframes flower__g-fr-leaft-ans-7 { 923 | 0% { 924 | transform-origin: left; 925 | transform: rotate(45deg) scale(0); 926 | } 927 | } 928 | .flower__g-fr__leaf--8 { 929 | left: -4vmin; 930 | top: 15vmin; 931 | transform: rotate(15deg) rotateY(-180deg); 932 | -webkit-animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; 933 | animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; 934 | } 935 | @-webkit-keyframes flower__g-fr-leaft-ans-8 { 936 | 0% { 937 | transform-origin: right; 938 | transform: rotate(15deg) rotateY(-180deg) scale(0); 939 | } 940 | } 941 | @keyframes flower__g-fr-leaft-ans-8 { 942 | 0% { 943 | transform-origin: right; 944 | transform: rotate(15deg) rotateY(-180deg) scale(0); 945 | } 946 | } 947 | 948 | .long-g { 949 | position: absolute; 950 | bottom: 25vmin; 951 | left: -42vmin; 952 | transform-origin: bottom left; 953 | } 954 | .long-g--1 { 955 | bottom: 0vmin; 956 | transform: scale(0.8) rotate(-5deg); 957 | } 958 | .long-g--1 .leaf { 959 | -webkit-mask-image: linear-gradient(to top, transparent 40%, #079097 80%) !important; 960 | } 961 | .long-g--1 .leaf--1 { 962 | --w: 5vmin; 963 | --h: 60vmin; 964 | left: -2vmin; 965 | transform: rotate(3deg) rotateY(-180deg); 966 | } 967 | .long-g--2, .long-g--3 { 968 | bottom: -3vmin; 969 | left: -35vmin; 970 | transform-origin: center; 971 | transform: scale(0.6) rotateX(60deg); 972 | } 973 | .long-g--2 .leaf, .long-g--3 .leaf { 974 | -webkit-mask-image: linear-gradient(to top, transparent 50%, #079097 80%) !important; 975 | } 976 | .long-g--2 .leaf--1, .long-g--3 .leaf--1 { 977 | left: -1vmin; 978 | transform: rotateY(-180deg); 979 | } 980 | .long-g--3 { 981 | left: -17vmin; 982 | bottom: 0vmin; 983 | } 984 | .long-g--3 .leaf { 985 | -webkit-mask-image: linear-gradient(to top, transparent 40%, #079097 80%) !important; 986 | } 987 | .long-g--4 { 988 | left: 25vmin; 989 | bottom: -3vmin; 990 | transform-origin: center; 991 | transform: scale(0.6) rotateX(60deg); 992 | } 993 | .long-g--4 .leaf { 994 | -webkit-mask-image: linear-gradient(to top, transparent 50%, #079097 80%) !important; 995 | } 996 | .long-g--5 { 997 | left: 42vmin; 998 | bottom: 0vmin; 999 | transform: scale(0.8) rotate(2deg); 1000 | } 1001 | .long-g--6 { 1002 | left: 0vmin; 1003 | bottom: -20vmin; 1004 | z-index: 100; 1005 | filter: blur(0.3vmin); 1006 | transform: scale(0.8) rotate(2deg); 1007 | } 1008 | .long-g--7 { 1009 | left: 35vmin; 1010 | bottom: 20vmin; 1011 | z-index: -1; 1012 | filter: blur(0.3vmin); 1013 | transform: scale(0.6) rotate(2deg); 1014 | opacity: 0.7; 1015 | } 1016 | .long-g .leaf { 1017 | --w: 15vmin; 1018 | --h: 40vmin; 1019 | --c: #1aaa15; 1020 | position: absolute; 1021 | bottom: 0; 1022 | width: var(--w); 1023 | height: var(--h); 1024 | border-top-left-radius: 100%; 1025 | border-left: 2vmin solid var(--c); 1026 | -webkit-mask-image: linear-gradient(to top, transparent 20%, var(--dark-color)); 1027 | transform-origin: bottom center; 1028 | } 1029 | .long-g .leaf--0 { 1030 | left: 2vmin; 1031 | -webkit-animation: leaf-ans-1 4s linear infinite; 1032 | animation: leaf-ans-1 4s linear infinite; 1033 | } 1034 | .long-g .leaf--1 { 1035 | --w: 5vmin; 1036 | --h: 60vmin; 1037 | -webkit-animation: leaf-ans-1 4s linear infinite; 1038 | animation: leaf-ans-1 4s linear infinite; 1039 | } 1040 | .long-g .leaf--2 { 1041 | --w: 10vmin; 1042 | --h: 40vmin; 1043 | left: -0.5vmin; 1044 | bottom: 5vmin; 1045 | transform-origin: bottom left; 1046 | transform: rotateY(-180deg); 1047 | -webkit-animation: leaf-ans-2 3s linear infinite; 1048 | animation: leaf-ans-2 3s linear infinite; 1049 | } 1050 | .long-g .leaf--3 { 1051 | --w: 5vmin; 1052 | --h: 30vmin; 1053 | left: -1vmin; 1054 | bottom: 3.2vmin; 1055 | transform-origin: bottom left; 1056 | transform: rotate(-10deg) rotateY(-180deg); 1057 | -webkit-animation: leaf-ans-3 3s linear infinite; 1058 | animation: leaf-ans-3 3s linear infinite; 1059 | } 1060 | 1061 | @-webkit-keyframes leaf-ans-1 { 1062 | 0%, 100% { 1063 | transform: rotate(-5deg) scale(1); 1064 | } 1065 | 50% { 1066 | transform: rotate(5deg) scale(1.1); 1067 | } 1068 | } 1069 | 1070 | @keyframes leaf-ans-1 { 1071 | 0%, 100% { 1072 | transform: rotate(-5deg) scale(1); 1073 | } 1074 | 50% { 1075 | transform: rotate(5deg) scale(1.1); 1076 | } 1077 | } 1078 | @-webkit-keyframes leaf-ans-2 { 1079 | 0%, 100% { 1080 | transform: rotateY(-180deg) rotate(5deg); 1081 | } 1082 | 50% { 1083 | transform: rotateY(-180deg) rotate(0deg) scale(1.1); 1084 | } 1085 | } 1086 | @keyframes leaf-ans-2 { 1087 | 0%, 100% { 1088 | transform: rotateY(-180deg) rotate(5deg); 1089 | } 1090 | 50% { 1091 | transform: rotateY(-180deg) rotate(0deg) scale(1.1); 1092 | } 1093 | } 1094 | @-webkit-keyframes leaf-ans-3 { 1095 | 0%, 100% { 1096 | transform: rotate(-10deg) rotateY(-180deg); 1097 | } 1098 | 50% { 1099 | transform: rotate(-20deg) rotateY(-180deg); 1100 | } 1101 | } 1102 | @keyframes leaf-ans-3 { 1103 | 0%, 100% { 1104 | transform: rotate(-10deg) rotateY(-180deg); 1105 | } 1106 | 50% { 1107 | transform: rotate(-20deg) rotateY(-180deg); 1108 | } 1109 | } 1110 | .grow-ans { 1111 | -webkit-animation: grow-ans 2s var(--d) backwards; 1112 | animation: grow-ans 2s var(--d) backwards; 1113 | } 1114 | 1115 | @-webkit-keyframes grow-ans { 1116 | 0% { 1117 | transform: scale(0); 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | @keyframes grow-ans { 1123 | 0% { 1124 | transform: scale(0); 1125 | opacity: 0; 1126 | } 1127 | } 1128 | @-webkit-keyframes light-ans { 1129 | 0% { 1130 | opacity: 0; 1131 | transform: translateY(0vmin); 1132 | } 1133 | 25% { 1134 | opacity: 1; 1135 | transform: translateY(-5vmin) translateX(-2vmin); 1136 | } 1137 | 50% { 1138 | opacity: 1; 1139 | transform: translateY(-15vmin) translateX(2vmin); 1140 | filter: blur(0.2vmin); 1141 | } 1142 | 75% { 1143 | transform: translateY(-20vmin) translateX(-2vmin); 1144 | filter: blur(0.2vmin); 1145 | } 1146 | 100% { 1147 | transform: translateY(-30vmin); 1148 | opacity: 0; 1149 | filter: blur(1vmin); 1150 | } 1151 | } 1152 | @keyframes light-ans { 1153 | 0% { 1154 | opacity: 0; 1155 | transform: translateY(0vmin); 1156 | } 1157 | 25% { 1158 | opacity: 1; 1159 | transform: translateY(-5vmin) translateX(-2vmin); 1160 | } 1161 | 50% { 1162 | opacity: 1; 1163 | transform: translateY(-15vmin) translateX(2vmin); 1164 | filter: blur(0.2vmin); 1165 | } 1166 | 75% { 1167 | transform: translateY(-20vmin) translateX(-2vmin); 1168 | filter: blur(0.2vmin); 1169 | } 1170 | 100% { 1171 | transform: translateY(-30vmin); 1172 | opacity: 0; 1173 | filter: blur(1vmin); 1174 | } 1175 | } 1176 | @-webkit-keyframes moving-flower-1 { 1177 | 0%, 100% { 1178 | transform: rotate(2deg); 1179 | } 1180 | 50% { 1181 | transform: rotate(-2deg); 1182 | } 1183 | } 1184 | @keyframes moving-flower-1 { 1185 | 0%, 100% { 1186 | transform: rotate(2deg); 1187 | } 1188 | 50% { 1189 | transform: rotate(-2deg); 1190 | } 1191 | } 1192 | @-webkit-keyframes moving-flower-2 { 1193 | 0%, 100% { 1194 | transform: rotate(18deg); 1195 | } 1196 | 50% { 1197 | transform: rotate(14deg); 1198 | } 1199 | } 1200 | @keyframes moving-flower-2 { 1201 | 0%, 100% { 1202 | transform: rotate(18deg); 1203 | } 1204 | 50% { 1205 | transform: rotate(14deg); 1206 | } 1207 | } 1208 | @-webkit-keyframes moving-flower-3 { 1209 | 0%, 100% { 1210 | transform: rotate(-18deg); 1211 | } 1212 | 50% { 1213 | transform: rotate(-20deg) rotateY(-10deg); 1214 | } 1215 | } 1216 | @keyframes moving-flower-3 { 1217 | 0%, 100% { 1218 | transform: rotate(-18deg); 1219 | } 1220 | 50% { 1221 | transform: rotate(-20deg) rotateY(-10deg); 1222 | } 1223 | } 1224 | @-webkit-keyframes blooming-leaf-right { 1225 | 0% { 1226 | transform-origin: left; 1227 | transform: rotate(70deg) rotateY(30deg) scale(0); 1228 | } 1229 | } 1230 | @keyframes blooming-leaf-right { 1231 | 0% { 1232 | transform-origin: left; 1233 | transform: rotate(70deg) rotateY(30deg) scale(0); 1234 | } 1235 | } 1236 | @-webkit-keyframes blooming-leaf-left { 1237 | 0% { 1238 | transform-origin: right; 1239 | transform: rotate(-70deg) rotateY(30deg) scale(0); 1240 | } 1241 | } 1242 | @keyframes blooming-leaf-left { 1243 | 0% { 1244 | transform-origin: right; 1245 | transform: rotate(-70deg) rotateY(30deg) scale(0); 1246 | } 1247 | } 1248 | @-webkit-keyframes grow-flower-tree { 1249 | 0% { 1250 | height: 0; 1251 | border-radius: 1vmin; 1252 | } 1253 | } 1254 | @keyframes grow-flower-tree { 1255 | 0% { 1256 | height: 0; 1257 | border-radius: 1vmin; 1258 | } 1259 | } 1260 | @-webkit-keyframes blooming-flower { 1261 | 0% { 1262 | transform: scale(0); 1263 | } 1264 | } 1265 | @keyframes blooming-flower { 1266 | 0% { 1267 | transform: scale(0); 1268 | } 1269 | } 1270 | @-webkit-keyframes moving-grass { 1271 | 0%, 100% { 1272 | transform: rotate(-48deg) rotateY(40deg); 1273 | } 1274 | 50% { 1275 | transform: rotate(-50deg) rotateY(40deg); 1276 | } 1277 | } 1278 | @keyframes moving-grass { 1279 | 0%, 100% { 1280 | transform: rotate(-48deg) rotateY(40deg); 1281 | } 1282 | 50% { 1283 | transform: rotate(-50deg) rotateY(40deg); 1284 | } 1285 | } 1286 | @-webkit-keyframes moving-grass--2 { 1287 | 0%, 100% { 1288 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 1289 | } 1290 | 50% { 1291 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); 1292 | } 1293 | } 1294 | @keyframes moving-grass--2 { 1295 | 0%, 100% { 1296 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); 1297 | } 1298 | 50% { 1299 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); 1300 | } 1301 | } 1302 | .growing-grass { 1303 | -webkit-animation: growing-grass-ans 1s 2s backwards; 1304 | animation: growing-grass-ans 1s 2s backwards; 1305 | } 1306 | 1307 | @-webkit-keyframes growing-grass-ans { 1308 | 0% { 1309 | transform: scale(0); 1310 | } 1311 | } 1312 | 1313 | @keyframes growing-grass-ans { 1314 | 0% { 1315 | transform: scale(0); 1316 | } 1317 | } 1318 | .container * { 1319 | -webkit-animation-play-state: paused !important; 1320 | animation-play-state: paused !important; 1321 | }/*# sourceMappingURL=main.css.map */ --------------------------------------------------------------------------------