സി.എസ്.എസ് ആനിമേഷൻ അതിന്റെ സാധ്യതകൾ

ആശ്ചര്യപ്പെട്ടു എങ്ങനെ ആനിമേഷൻ ഉണ്ടാക്കുവാൻ സിഎസ്എസ്, പല ഉപയോക്താക്കൾ പാഠങ്ങൾ നിർദ്ദേശങ്ങളുടെ അന്വേഷിക്കുന്നു. എന്നാൽ ഇത്തരം നിർദ്ദേശങ്ങൾ മറ്റു കാര്യങ്ങൾ, ഇവിടെ കാണാം എങ്കിലും, ഞങ്ങൾ പ്രധാന ഉപയോഗപ്രദമായ ഉപദേശം സി.എസ്.എസ് ഉപയോഗിച്ച് ആനിമേഷൻ സൃഷ്ടിപ്പിൽ തരും.

അനുയോജ്യമായ വികസന രഹസ്യം

മിനുസമുള്ള ഒരു ആനിമേഷൻ സിഎസ്എസ് ആണ് പൂർണ്ണമായി എന്താണെന്ന് ആഗ്രഹിക്കുന്നവർക്ക് ലഭിച്ച കഴിയുന്ന ഉപദേശം, താഴെ. കോഡിന്റെ തയ്യാറാക്കിയ കഷണങ്ങൾ ദിവസേന പരീക്ഷണങ്ങൾ എപ്പോൾ, സ്വന്തം പരീക്ഷണങ്ങൾ നടപ്പിലാക്കുന്നതിനായി ശ്രമിക്കുക. സ്വന്തം സൈറ്റുകളിൽ സൃഷ്ടി നിന്നും ഒഴിവുള്ള സമയം, പൂർണ്ണമായി ഈ അല്ലെങ്കിൽ ആ പ്രോപ്പർട്ടി പഠിക്കാൻ, കോഡ് ഒരു കഷണം ഏടുകൾ സംഭവിക്കണമെന്നും എന്തു കാണാൻ ശ്രമിക്കുക. തികച്ചും വ്യത്യസ്തമായ ഒരു ഭാഷ ഉപകരണങ്ങൾ ഉപയോഗിച്ച് രസകരമായ ആശയങ്ങൾ എല്ലാത്തരം നടപ്പാക്കാൻ ശ്രമിക്കുക, CSS ആനിമേഷനുകൾ പുതിയ രീതിയിൽ നിങ്ങൾക്ക് തുറക്കും. ഈ ലളിതമായ ഉപദേശം ഇതാണ് - സ്വയം പരീക്ഷണം.

സിഎസ്എസ്-ആനിമേഷൻ രൂപം

ഇപ്പോൾ രസകരമായ ഉദാഹരണങ്ങൾ വേണ്ടി. ചട്ടം പോലെ, അനിമേഷൻ സാധാരണ ഉപയോഗം ക്രമേണ സൈറ്റിന്റെ ചില ഘടകങ്ങൾ മാറ്റാൻ സമയം അവസാനിച്ചു. എന്നാൽ ഈ വളരെ വ്യക്തമായ ആണ്, അല്ലേ? എന്നാല്, ഇവിടെ ആനിമേഷൻ രൂപം സമയം ഉപയോഗിക്കാൻ ഒരു അസാധാരണമായ വഴി നിങ്ങൾ പങ്കിടാൻ.

അനിമേഷൻ കഷണം അല്ലെങ്കിൽ മുഴുവൻ സൈറ്റിൽ മാറ്റവും ഏതാണ്ട് ഉടനടിയുള്ള കഴിയും വസ്തുത. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ ഏതെങ്കിലും രണ്ട് കീഫ്രെയിമുകൾ ചോദിക്കുന്നു, പക്ഷേ വളരെ ചെറിയ പരിധി ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, 0,001% തുല്യമായ വരാം. ഈ സാഹചര്യത്തിൽ, സിഎസ്എസ് ആനിമേഷൻ തൽക്ഷണം സംഭവിക്കാം. ഒരു നിയോൺ സൈൻ സിമുലേറ്റ് അത്യുത്തമം. ഈ അടയാളം മിന്നിത്തെളിയുകയും, ആനിമേഷൻ സിഎസ്എസ് കൂടുതൽ സുതാര്യത എങ്കിൽ, ഉപയോഗിക്കുവാനുള്ള സവിശേഷത ടെക്സ്റ്റ്-നിഴൽ, അടയാളം ഏകദേശം യഥാർത്ഥ കാര്യം പോലെ ചെയ്യും.

ഒരു ഉദാഹരണം കോഡ് ആണ്.

ഫങ്ഷണൽ ബട്ടണുകൾ മെച്ചപ്പെടുത്തുക

ഞങ്ങൾ വിരളമാണ് എന്താണു ചോദ്യം പരിഗണിക്കുക എങ്കിൽ സിഎസ്എസ്-ആനിമേഷൻ ബട്ടൺ, അത് സൈറ്റുകൾ വലിയ സെറ്റിൽ മറ്റു ഐച്ഛികങ്ങളു ബട്ടൺ പറഞ്ഞു കഴിയും. ഒരു ഉദാഹരണം നോക്കാം. പൈപ്പിന്െറ ബട്ടണുകൾ അമർത്തി പ്രഭാവം. ഉദാഹരണം കോഡ് - താഴെ.

കോഡ് അനിമേഷൻ സി.എസ്.എസ് തടയൽ അത്തരം ഒരു ലളിതമായ കഷണം ശരിക്കും നോക്കും. ഇത് വളരെ രസകരമായ തോന്നുന്നു, പലപ്പോഴും തികച്ചും വ്യത്യസ്തമായ സൈറ്റുകളിൽ ഉപയോഗിക്കുന്നു.

സിഎസ്എസ്-അനിമേഷൻ നിങ്ങൾ ഒരു സൈറ്റ് സ്നിപ്പറ്റിന്റെ അതിലൂടെ പോകുന്ന സമയത്ത്

ചലനാത്മകവും ആധുനിക സൈറ്റ്, ഇനി അത് ഉപയോക്താവ് തങ്ങിനിൽക്കുന്നു. കൂടാതെ, ഒരു പ്രധാന പങ്ക് പുറമേ പാരസ്പര്യ കളിക്കുന്നു ആണ്. ഇത് തീർച്ചയായും ശരിയാണ്, പക്ഷേ എന്തു കഴിയുന്നത്ര ഇന്ററാക്റ്റീവ് സൈറ്റിൽ കഴിയും?

വളരെ നന്നായി പിന്നെ മൗസ് സൈറ്റിന്റെ രൂപകൽപ്പന കഷണങ്ങളാക്കി പ്രവർത്തിക്കാൻ നോക്കി. ആനിമേഷൻ ബട്ടണുകൾ ഹോവർ ഞങ്ങൾ മുകളിൽ ചർച്ച, പക്ഷേ നിങ്ങൾക്ക് ഏറ്റവും കൂടുതൽ സ്റ്റൈലിഷ് making സൈറ്റിന്റെ വിവിധ കഷണങ്ങൾ "പുനരുജ്ജീവിപ്പിച്ചു" അത്, നിന്ന്. മറ്റുള്ളതെല്ലാം എന്നപോലെ, ഇവിടെ പ്രധാന തത്ത്വം - അത് കെടന്നൊറങ്ങുന്ന ചെയ്യരുത്.

അതിനാൽ, നാല് ബന്ധപ്പെട്ട ഉള്ള എടുക്കാം ഒരു നല്ല പരിവർത്തന പ്രോപ്പർട്ടി, ഇല്ല.

ഒരു സമയം സിഎസ്എസ്-ആനിമേഷൻ സമയത്ത് കോഡിന്റെ ഈ ഭാഗം അതിലൂടെ പോകുന്ന സമയത്ത് മാറ്റും. സമയ ദൈർഘ്യം പ്രോപ്പർട്ടി നിർണ്ണയിക്കുന്നത്. അത് ഒരു വിചിത്രമായൊരു മാറ്റം ഞങ്ങൾ സെലക്ടർ സജ്ജമാക്കുന്ന ഏതെങ്കിലും തുടങ്ങുന്നു ഒരു ഇനം അതിലൂടെ പോകുന്ന സമയത്ത് അത് ആണ്. നമ്മുടെ കാര്യത്തിൽ അത് - .എലെമെംത് (മുന്നോട്ട് ചൂണ്ടിക്കാണിക്കാൻ). ഏറെക്കുറെ താഴെ വരുമ്പോൾ കപട .ഹൊവെര് ഉണ്ട് കണ്ടെയ്നർ DIV, ചുവപ്പ് നിന്ന് പച്ച പശ്ചാത്തല മാറ്റങ്ങൾ മാറ്റം, കോഡിന്റെ ഒരു ഉദാഹരണമാണ്.

ഒരു ഉപയോക്താവ് മൗസ് സി.എസ്.എസ് ആനിമേഷൻ സഞ്ചരിക്കുമ്പോൾ ഉടനെ മാറില്ല, എന്നാൽ ഒരു രസകരമായ പ്രഭാവം സൃഷ്ടിക്കുന്നു ഒരു രണ്ടാം, ചില അംശം വൈകി.

കൂടാതെ, മുൻ ഉദാഹരണത്തിൽ, നിങ്ങൾ ഒരു കളരി ഘടകങ്ങളിൽ പശ്ചാത്തലത്തിൽ ചുവന്ന പച്ച മാറ്റുകയും 0.4 നിമിഷങ്ങൾക്കുള്ളിൽ നീക്കുക എന്ന് ഒരു ചട്ടം ചോദിച്ചാൽ എല്ലാ മൂല്യം ഉപയോഗിച്ച്, നിങ്ങൾ മുഴുവൻ സ്വത്തിനെ അപേക്ഷിക്കാം എന്ന് കുറിക്കുകയും ചെയ്യണം പൂർണ്ണമായി ഉടനെ.

താഴെ പറയുന്നു ഉദാഹരണം കോഡ് പ്രതിനിധാനം.

പ്രോപ്പർട്ടികൾ പാഡിംഗ് പശ്ചാത്തലം സംക്രമണ കാണുന്നത് പോലെ നിശ്ചയിച്ചിരിക്കുന്നു സംക്രമണ സ്വത്തായ സംഭവിക്കാം. നിങ്ങൾ ഒരു കോമാ വേർതിരിച്ച മൂല്യങ്ങൾ ഒരു കൂട്ടം സാധിയ്ക്കുന്ന ശ്രദ്ധിക്കേണ്ടതാണ്.

ബട്ടണുകൾ ആനിമേഷൻ ഈ തരം ഉപയോഗിച്ച് ചില കലയല്ല

തത്വത്തിൽ, ദീർഘകാലാടിസ്ഥാനത്തിൽ അത് അങ്ങനെ ഏതു പ്രധാനപ്പെട്ട ക്രമത്തിൽ വ്യക്തമാക്കിയ ഡാറ്റ മൂല്യങ്ങൾ കൈമാറ്റം ചെയ്യുന്നതാണ് ആണ്. ഒരു കേസിൽ ഒഴികെ. നാം കാലതാമസം പ്രോപ്പർട്ടി കൈകാര്യം ചെയ്യാം. ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ ദൈർഘ്യം സമയവും വ്യക്തമാക്കേണ്ടതുണ്ട്. മറ്റൊരു തരത്തിൽ പറഞ്ഞാൽ, ഞങ്ങൾ ഒരു കാലതാമസം എത്രത്തോളം ഞങ്ങൾക്ക് ആവശ്യമായ സംഭവിക്കാം പറയാൻ കോഡ് വരും.

ഇവിടെ ഓർക്കുക ഉള്ള ചില മാറ്റം പ്രാബല്യത്തിൽ വന്നേക്കാം എന്നു. അത് അതിനാല് കഴിയില്ല, ആണ്. അവർ ആനിമേഷൻ കഴിയില്ല എന്ന് ഇതിന് കാരണം.

ടെക്സ്റ്റ് ആനിമേഷൻ

കോഡ് സഹായത്തോടെ വെച്ചു നല്ല ആനിമേഷൻ സി.എസ്.എസ് ടെക്സ്റ്റ് കഴിയും. ഈ ലേഖനം ചില, ഒരു പ്രധാന തലക്കെട്ട്, സൈറ്റ് ശീർഷകം ആയിരിക്കാം. മുകളിൽ സൂചിപ്പിച്ച, പ്രധാന കാര്യം - അത് കെടന്നൊറങ്ങുന്ന ചെയ്യരുത് ഏത് വിലകുറഞ്ഞ നോക്കും, ഒരു മേൽനോട്ടമുള്ള നിങ്ങളുടെ സൈറ്റ് തിരിക്കുക ചെയ്യരുത്.

നന്നായി, ടെക്സ്റ്റ് നിഴലുകൾ ടെക്സ്റ്റ് ഏതു സി.എസ്.എസ് ആനിമേഷൻ കണ്ടെത്താൻ, അത് സൃഷ്ടിക്കാൻ ശ്രമിക്കുക, ചെയ്യട്ടെ. ഒരുപക്ഷേ നിങ്ങൾ പെയിന്റിംഗുകൾ പേരുകൾ സ്വയം ഏതെങ്കിലും മങ്ങിയ-ഇരുണ്ട പശ്ചാത്തലത്തിൽ ന് മങ്ങാൻ തോന്നി എവിടെ ഹൊറർ സിനിമകൾ ഞങ്ങൾ കണ്ടു. ഈ പോലെ എന്തെങ്കിലും ഒരു പൊതു ഉദാഹരണം പുനഃസൃഷ്ടിച്ച് ശ്രമിക്കാം.

ഹൊറർ സിനിമകളുടെ ശൈലിയിൽ ടെക്സ്റ്റ് ആനിമേറ്റ്

യഥാർത്ഥത്തിൽ, ആശയം ഏത് അക്ഷരങ്ങൾ അല്പം അവ്യക്തമായ ആയിരുന്നു ടെക്സ്റ്റ് വരുത്തി തിരിയലും തന്നെ. അക്ഷരങ്ങൾ തമ്മിലുള്ള അനുഭവിച്ച് ഒരു സ്പേസ് വേണം. നാം ഇംതെരല്ഫബെതിച് തണൽ, അതുപോലെ ഇടവേള ഉപയോഗിക്കും. ആശയം നടപ്പാക്കാൻ, ഞങ്ങൾ ഒരു സ്ക്രിപ്റ്റ് രചയിതാവ് ഡേവ് റൂപർട്ട് ലെത്തെരിന്ഗ്.ജ്സ് വേണം. അവൻ ടാഗ് നേടേണ്ടതാണ് വാക്കുകൾ അതും അക്ഷരങ്ങൾ പൊതിയാൻ ആവശ്യമാണ്. ആദ്യം നിങ്ങൾ H2 ടാഗിൽ വാചകം മൂടുവാൻ വേണം. ഒരു ഉദാഹരണം കോഡ് ആണ്.

ടാഗ് നേടേണ്ടതാണ് H2 ടാഗുകളിൽ അപ്പോൾ ഒബെര്നൊമ് എല്ലാ വാക്കുകൾ.

ഈ പോലെ സംഭവിക്കുന്നു.

ഏതാണ്ട് മേലുളള വിശകലനം ചെയ്യും, എന്നാൽ ആ ബഗ് എന്നു പറഞ്ഞു.

മാനികോഗൻ മതിയായ ഘടന ലഭിക്കും.

തൽഫലമായി, ഞങ്ങൾ ഒരു ടാഗ് നേടേണ്ടതാണ് പൊതിഞ്ഞ് നമ്മുടെ നിലവിലുള്ള കത്തുകൾ വീതം. അവർ ശരിക്കും ഒരു കാര്യം തിരിഞ്ഞു. എന്നാൽ ഉദാഹരണത്തിന് ഫലമായി മുകളിൽ കോഡ് വളരെ ലളിതവത്കൃതമായ. അവരുടെ മുഴുവൻ ഘടന, നിങ്ങൾ സ്വയം എഴുതാം, അതു കൂടുതൽ കുറച്ച് ആയിരിക്കും. നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ടെക്സ്റ്റ് എന്തുതരത്തിലുള്ള പുറമേ ആശ്രയിച്ചിരിക്കുന്നു.

നമ്മുടെ പ്രയത്നം അല്പം ശൈലിയിലുള്ള നിഗമനം. മുകളിൽ ഉദാഹരണത്തിന് നമ്മുടെ ശീർഷകങ്ങൾ എല്ലാവരും സ്ക്രീനിന്റെ മുഴുവൻ വീതി സ്ഥിതി ചെയ്യും. അവർ മിക്കവാറും എല്ലാ ലഭ്യമായ സ്ഥലം ഏറ്റെടുക്കുകയും.

ഞങ്ങളുടെ കത്തുകൾ സ്ക്രീനിന്റെ മധ്യഭാഗത്ത് എല്ലാ സ്ഥാപിക്കുക പോകാനൊരുങ്ങുന്ന ശേഷം, പിന്നെ, നമ്മുടെ കണ്ടെയ്നർ വേണ്ടി ഞങ്ങളും ഫ്ലക്സ്ബോക്സിനുള്ള ആവശ്യമാണ്.

ഇവിടെ അതിന്റെ കോഡ് ഒരു ഉദാഹരണമാണ്.

ഇപ്പോൾ ഞങ്ങൾ അങ്ങനെ പാരന്റ് ക്ലാസ് .OS-ശൈലികൾ ഉൾക്കൊള്ളുന്ന ഒരു ചാൺ ക്ലാസിൽ പൊതിഞ്ഞ് സകല കത്തുകൾ, സ്ഥിതി ചെയ്യും, മധ്യത്തിലായി അറ്റാച്ചുചെയ്യും ചെയ്തു.

ആ തന്നെ കത്ത് സ്പെയ്സിംഗ് ആണ്, സ്വതന്ത്ര സ്ഥലം ബിറ്റ് ചേർക്കാൻ മറക്കരുത്.

ഈ സാഹചര്യത്തിൽ, ആദ്യ റാപ്പർ ചില അധിക ഗുണങ്ങളാണ് ആഗ്രഹിക്കുന്നു. ഈ പ്രോപ്പർട്ടി കാഴ്ചപ്പാട്. അത് നമുക്ക് ഉറപ്പു ഈ സൈറ്റ്, വേറിട്ടു ആകും പ്രകടിപ്പിക്കുന്നത് എന്നു നാം വരുത്തുന്നതിന് അനുവദിക്കുന്നു.

നമ്മുടെ കത്തുകൾ തങ്ങളെ സുതാര്യമായ ആയിരിക്കും, ഞങ്ങൾ എവിടെയോ 5.2 സെക്കൻഡിനുള്ളിൽ അവർക്ക് ആനിമേഷൻ ഒരു പരിധി പ്രത്യക്ഷപ്പെടും. താഴെ - ഉദാഹരണം.

ഇത് എങ്ങനെ കാലതാമസം നമ്മുടെ വാചകങ്ങൾ ശൈലികളും ദൃശ്യമാകും എന്തു കൊണ്ട് നിർണ്ണയിക്കാൻ പ്രധാനമാണ്. ടെക്സ്റ്റ് ഭാഗങ്ങൾ ഏത് പഴയതുപോലെ, എത്ര വേഗത്തിൽ ദൃശ്യമാകും. കോഡ് ഇങ്ങനെ കാണപ്പെടും.

ഞങ്ങളെ ഒരു ചെറിയ എന്നാൽ വളരെ രസകരമായ അനുവാദം തരേണമേ. 0.2 ഒപാസിറ്റി വയ്ക്കുക. ഇംതെരല്ഫബെതിച് ദൂരം അങ്ങനെ വളരെ വലിയ ആയിരിക്കും. അക്ഷരങ്ങൾ നിരവധി അച്ചുതണ്ട് വൈ വേണ്ടി െചരികനതിനാണ് ചെയ്യും നിങ്ങൾ കാണുക, അതുപോലെ നിങ്ങളുടെ സൈറ്റിന്റെ ഉപയോക്താക്കൾക്കായി ഈ കത്തുകൾ ഒരു ചെറിയ ഭാഗം മാത്രമേ ആയിരിക്കും. കൂടാതെ, ടെക്സ്റ്റ്-നിഴൽ എന്ന ഉള്ള പ്രഭാവം നൽകാൻ മറക്കരുത്. ഹാഫ് ആനിമേഷൻ, ഞങ്ങൾ ഒരു അസാധാരണ കാര്യം ചെയ്തു. നാം അവയ്ക്കിടയിലുള്ളതിൻറെയും ദൂരം കുറയ്ക്കാൻ അക്ഷരങ്ങള് പ്രതിഫലം കൂടാതെ, തുടർന്ന് ഒപാസിറ്റി വർദ്ധിപ്പിച്ചു അച്ചുതണ്ട് വൈ വേണ്ടി 0 ന് പൊവെര്നൊമ് ചെയ്തുകഴിഞ്ഞാൽ

അവസാനം നമ്മൾ വീണ്ടും ഏതാനും അക്ഷരങ്ങളോ വംശനാശഭീഷണി പ്രൊമഷ്ഹ്തബിരുഎമ് അവരെ ചേർക്കുക. ഈ പുതിയ ചെറിയ മങ്ങൽ കഴിക്കും.

ഒടുവിൽ കഴിഞ്ഞ വാചകം സിഎസ്എസ്-ആനിമേഷൻ.

ഉവ്വ്, ഒടുവിൽ അവസാന പതിപ്പിക്കുക. നാം ചില പ്രത്യേക വാക്കുകൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കും. അവർ ഒരു ബോൾഡ് മുഖം. ഈ ആവശ്യമായ ഊന്നൽ തരും.

പ്രചോദനമായ കുറിച്ച് മറക്കരുത്

നിങ്ങൾ സ്വത്തുക്കളും സി.എസ്.എസ് ആനിമേഷൻ ഉപയോഗിച്ച് സ്വയം പരീക്ഷണങ്ങൾ ശ്രമിക്കുമ്പോൾ, ദൈനംദിന ജീവിതത്തിൽ എല്ലാം ലെ പ്രചോദനം കണ്ടെത്താൻ ശ്രമിക്കുക. ഈ രസകരമായ വെബ് പേജുകളിൽ നിന്നും ചില അത്ഭുതകരമായ വീഡിയോ പ്രഭാവം ഒന്നും കഴിയും.

കൂടാതെ, ഈ അല്ലെങ്കിൽ ആ പ്രഭാവം എങ്ങനെ ചെയ്യാൻ, PRY എങ്കിൽ, സ്വന്തമായി അത് പുനഃസൃഷ്ടിക്കുന്നതിന് ശ്രമിക്കുക, നിങ്ങൾ വലിയ ഫലങ്ങൾ നേടാൻ കഴിയും. അല്ലെങ്കിൽ, കുറഞ്ഞത്, എപ്പോഴും പ്രോഗ്രാമിങ് ഭാഷ നിങ്ങൾ ചെയ്യുന്നു, വാസ്തവത്തിൽ, അത് ഉപയോഗിക്കുന്ന സാധ്യതകളും കുറിച്ച് കൂടുതൽ എന്തെങ്കിലും പഠിക്കാൻ. പോലുമില്ല പൂർണ്ണമായി നിങ്ങളുടെ ആശയം നന്നായി വിശദമാക്കാം ചെയ്തേക്കാം മനസ്സിലായി.