KSS साठी ॲनिमेशन. CSS3 मध्ये रंगीत आणि ॲनिमेटेड मेनू. स्विच तयार करण्यासाठी जनरेटर

प्रत्येक वेळी वापरकर्ता प्रोग्राम उघडतो तेव्हा, मजकूर टाइप करण्याच्या उद्देशाने मुख्य फील्ड व्यतिरिक्त, पृष्ठाच्या शीर्षस्थानी त्याला एक विस्तृत मेनू दिसतो जो त्याला सर्व मूलभूत ऑपरेशन्स सर्वात सोयीस्करपणे आणि द्रुतपणे करण्यास अनुमती देतो. हे रंगासह मजकूर हायलाइट करण्याच्या ऑपरेशनवर देखील लागू होते.

फॉन्टचा रंग बदलण्यासाठी, तुम्हाला वरच्या मेनूमधील "होम" टॅब निवडण्याची आवश्यकता आहे - नियम म्हणून, जेव्हा तुम्ही प्रोग्राम उघडता तेव्हा तो डीफॉल्टनुसार उघडतो. या टॅबचा संपूर्ण मेनू अनेक ब्लॉकमध्ये विभागलेला आहे, त्यातील सामग्री प्रत्येक ब्लॉकच्या तळाशी दर्शविली आहे.

रंगासह मजकूर हायलाइट करण्यासाठी, तुम्हाला "फॉन्ट" शब्दाने चिन्हांकित केलेल्या डावीकडील दुसऱ्या ब्लॉककडे लक्ष देणे आवश्यक आहे. या ब्लॉकमध्ये अक्षर "A" चिन्ह आहे, जो रंग बदल मेनूचा दुवा आहे. पत्रावर क्लिक करून, वापरकर्ता रंगांच्या पॅलेटसह टॅब खाली उतरवतो जो तो टाइप करत असलेल्या मजकूरासाठी वापरू शकतो.

हे लक्षात ठेवणे महत्त्वाचे आहे की रंग बदलण्याचे अनेक मार्ग आहेत. प्रथम, आपण आधीच टाइप केलेल्या मजकूराचा रंग बदलू शकता: हे करण्यासाठी, आपल्याला दाबून ठेवणे आवश्यक आहे डावे बटणमाऊस, मजकूराचा आवश्यक विभाग निवडा आणि नंतर नमूद केलेल्या मेनूमध्ये तुम्हाला निवडलेल्या तुकड्यांना द्यायचा असलेला रंग निवडा.

याव्यतिरिक्त, आपण प्रोग्राममध्ये त्वरित मजकूर टाइप करण्याचे कार्य सेट करू शकता इच्छित रंग. हे करण्यासाठी, तुम्ही टायपिंग सुरू करण्यापूर्वी, तुम्ही वरील मेनू वापरून आवश्यक रंग निवडावा आणि भविष्यातील सर्व शब्द नेमके त्याच रंगाचे असतील. त्याच वेळी, रंगांसह शब्द हायलाइट करण्याची आवश्यकता यापुढे अस्तित्वात नसल्यानंतर मजकूराचा काळा रंग परत करण्यासाठी समान पद्धत वापरण्यास विसरू नका.

माऊस मेनू वापरून रंग बदलणे

फॉन्ट रंग बदलण्याचा दुसरा मार्ग म्हणजे माउस वापरणे. काही वापरकर्ते असा दावा करतात की ते अधिक सोयीस्कर आहे, परंतु या विषयावर एकमत नाही. हे लक्षात घेतले पाहिजे की माऊस वापरणे, जसे की शीर्ष मेनूच्या बाबतीत, आपल्याला आधीच टाइप केलेला मजकूर रंगविण्यासाठी आणि भविष्यातील मजकूरावर रंग सेटिंग लागू करण्यास अनुमती देते.

हे करण्यासाठी, तुम्हाला उजवे माऊस बटण क्लिक करावे लागेल. या कृतीमुळे एक मेनू दिसेल ज्यामध्ये तुम्हाला "फॉन्ट" आयटम निवडण्याची आवश्यकता आहे. ही निवडएक टॅब बाहेर पडण्यास कारणीभूत ठरेल जो वापरल्यावर सारख्याच टॅब सारखा असेल शीर्ष मेनू. तथापि, त्यात देखील समाविष्ट आहे अधिकफॉन्ट बदलण्याचे पर्याय, एका मेनूमध्ये एकत्रित केले जातात, म्हणून वापरकर्त्याने रंग बदलण्यावर विशेष लक्ष केंद्रित करणे आवश्यक आहे.

सादर केलेल्या पॅलेटमधून इच्छित सावली निवडून हे केले जाऊ शकते. परिणामी, निवडलेला मजकूर किंवा तुम्ही नंतर टाइप केलेला मजकूर हा रंग असेल.

मी फॉन्टचा रंग कसा बदलू शकतो मजकूर संपादक, आणि XP आणि 7 साठी डेस्कटॉपवरील आयकॉन अंतर्गत फॉन्ट कसा बदलावा? html फॉन्ट कसा बदलायचा? आम्ही आमच्या लेखात या प्रश्नांकडे अधिक बारकाईने पाहू.

वर्ड एडिटरमध्ये फॉन्ट रंग

मजकूरात काम करताना शब्द संपादककोणत्याही वापरकर्त्याला अशी परिस्थिती असू शकते जेव्हा त्यांना टाइप केलेल्या मजकुराचा रंग बदलायचा असतो किंवा डेस्कटॉपवरील चिन्हांखालील फॉन्ट बदलायचा असतो.

वर्ड टेक्स्ट एडिटरमध्ये फॉन्टचा रंग कसा बदलायचा? सहसा अशी गरज बदलण्यासाठी उद्भवते वैयक्तिक शब्दकिंवा त्यांच्याकडे विशेष लक्ष वेधण्यासाठी मजकूराचे तुकडे. डीफॉल्टनुसार, फॉन्टचा रंग काळा वर सेट केला जातो. काळा रंग इच्छित रंगात बदलण्यासाठी, तुम्हाला खालील चरण पूर्ण करणे आवश्यक आहे:

संपादकाच्या "स्वरूप" मेनूमध्ये, "फॉन्ट" कमांड निवडा किंवा CTRL+D दाबा, या क्रिया डायलॉग बॉक्स उघडतात. या विंडोमध्ये, "फॉन्ट रंग" फील्डमध्ये, "स्वयंचलित" पॅरामीटर आधीपासूनच आहे...

0 0

तुम्हाला लागेल

संगणक; - इंटरनेट; - प्रशासक अधिकार.

सूचना

डावीकडील सूचीमध्ये "रंग योजना बदला" आयटम शोधा आणि त्यावर क्लिक करा. रंग आणि देखावाविंडो" ज्यामध्ये तुम्ही भिन्न निवडू शकता रंग योजनापॅनेल, विंडो आणि फॉन्टसाठी रंगांच्या तयार संयोजनांसह. ऑपरेटिंग सिस्टीममध्ये सामान्यतः एक प्रचंड श्रेणी असते विविध रंग, जे लागू दोन्ही वापरले जाऊ शकते सॉफ्टवेअर, आणि ऑपरेटिंग सिस्टममध्येच.

आपण निवडीशी समाधानी नसल्यास ऑपरेटिंग सिस्टम, बटणावर क्लिक करा...

0 0

Windows 7 मध्ये आपला डेस्कटॉप सानुकूलित करण्यासाठी, डेस्कटॉपवर उजवे-क्लिक करा आणि मेनू निवडा - वैयक्तिकरण.

डेस्कटॉप थीम बदलत आहे. येथे तुम्ही एकाच वेळी बदलण्यासाठी थीम निवडू शकता पार्श्वभूमी चित्रडेस्कटॉप, विंडो रंग, आवाज आणि स्क्रीनसेव्हर.
आपण आपल्या इच्छेनुसार थीम सानुकूलित करू शकता.

डेस्कटॉप पार्श्वभूमी - तुम्हाला एक प्रतिमा (फोटो, रेखाचित्र इ.) निवडण्याची परवानगी देते जी विंडोज डेस्कटॉप पार्श्वभूमी म्हणून प्रदर्शित केली जाईल. किंवा स्लाइडशो म्हणून एकाच वेळी अनेक प्रतिमा निवडा. याव्यतिरिक्त, आपण प्रतिमेची स्थिती निवडू शकता - भरा, फिट, ताणलेला, मध्यभागी किंवा टाइल केलेले (डुप्लिकेट).

विंडोचा रंग - तुम्हाला विंडो बॉर्डर, टास्कबार आणि स्टार्ट मेनूचा रंग बदलण्याची परवानगी देतो. आपण विंडो पारदर्शकता आणि रंग तीव्रता समायोजित करू शकता.

ध्वनी - तुम्हाला सानुकूलित करण्याची परवानगी देते साउंडट्रॅकविंडोज ऑपरेटिंग सिस्टममध्ये.
स्क्रीनसेव्हर - तुम्ही दीर्घकाळ निष्क्रियतेदरम्यान प्रदर्शित होणारा स्क्रीनसेव्हर कॉन्फिगर करू शकता...

0 0

लेबेदेवा-3-3 यांच्या संदेशातील हा कोट आहे मूळ संदेश

माझ्या डेस्कटॉपवर बऱ्याच काळापासून लाइट स्क्रीनसेव्हर आणि पांढरा फॉन्ट आहे. मी प्रोग्रॅम त्यांच्या आयकॉनवरून ओळखतो. आणि आज मला वाटते - शेवटी, फॉन्टचा रंग बदलणे शक्य असले पाहिजे.

मी फॉन्ट, स्क्रीन गुणधर्मांमध्ये शोधले... ते सापडले.

प्रारंभ वर जा - नियंत्रण पॅनेल - स्वरूप आणि वैयक्तिकरण - डेस्कटॉप पार्श्वभूमी बदला. "प्रतिमा स्थान" मध्ये "ठोस रंग" निवडा. एक निवड ऑफर केली जाईल. काही हलका रंग निवडा आणि "बदल जतन करा". तुमच्या डेस्कटॉपवरील फॉन्ट काळा होईल.

आता तुम्ही कोणतीही प्रतिमा अपलोड करू शकता योग्य आकार, डेस्कटॉप पार्श्वभूमी म्हणून, उदाहरणार्थ येथून...

0 0

या लेखात, आम्ही तुम्हाला विंडोज 7 मध्ये डेस्कटॉप विंडोचा फॉन्ट आकार कसा बदलायचा ते सांगू.

सूचनांचे अनुसरण करा:

प्रारंभ - नियंत्रण पॅनेल क्लिक करा. शोध बारमध्ये, "रंग" प्रविष्ट करा आणि विंडोचे रंग आणि मेट्रिक्स बदला. ड्रॉप-डाउन सूचीमधून, विंडोचा तो भाग निवडा ज्याचा फॉन्ट तुम्हाला बदलायचा आहे. उदाहरणार्थ, जर तुम्हाला मेनू बारमधील फॉन्ट बदलायचा असेल तर सूचीमधून मेनू बार निवडा. पुढे, खालीलपैकी कोणतेही करा: खालील बदल: फॉन्टच्या सूचीमधून, तुम्हाला आवश्यक वाटत असलेला फॉन्ट निवडा. फॉन्ट आकार सूचीमधून, तुम्हाला हवा असलेला आकार निवडा. रंग सूचीमध्ये, इच्छित फॉन्ट रंग निर्दिष्ट करा. आपण बदलू इच्छित असलेल्या सर्व आयटमसाठी वरील चरणांची पुनरावृत्ती करा आणि क्लिक करा...

0 0

डेस्कटॉपवरील चिन्हांचा रंग (लेबल) पांढऱ्या ते काळ्यामध्ये बदलण्यासाठी, मला 2 चरणांमध्ये एक मार्ग सापडला:

1. उजवे बटणउंदीर
गुणधर्म - डिझाइन - प्रभाव - "लागू करा" बॉक्स तपासा पुढील पद्धतगुळगुळीत स्क्रीन फॉन्ट: ClearType"-ठीक आहे (हे अगदी मानकानुसार आहे विंडोज शैली XP)

2. पुढे, "कार्यप्रदर्शन" परिच्छेदामध्ये प्रारंभ - सेटिंग्ज - नियंत्रण पॅनेल - सिस्टम - प्रगत - क्लिक करा, तेथे टॅबमध्ये सेटिंग्ज - क्लिक करा. व्हिज्युअल प्रभाव"डेस्कटॉप चिन्हांवर सावल्या कास्ट करा" अनचेक करा

टीप: साठी सर्वोत्तम सेटिंग्जतुमची आयकॉन लेबले, क्लियरटाइप सेटिंग देखील आहे:

प्रारंभ - सेटिंग्ज - नियंत्रण पॅनेल - क्लियरटाइप सेटिंग्ज - "क्लियरटाइप सक्षम करा" बॉक्स तपासा - आणि विझार्ड लाँच करा - क्लियरटाइप सेटिंग्ज - आपल्या आवडीनुसार पुढे कॉन्फिगर करा.

तयार!...

0 0

या धड्यात तुम्ही विंडोज 7 डेस्कटॉपचे डिझाइन बदलू शकता अशा सेटिंग्जबद्दल शिकाल.

Windows 7 मध्ये, तुम्ही फक्त एका क्लिकने तुमच्या डेस्कटॉपचे स्वरूप अक्षरशः बदलू शकता. तुम्ही Windows 7 मध्ये जवळजवळ प्रत्येक गोष्ट बदलू आणि सानुकूलित करू शकता: थीम, वॉलपेपर, विंडो रंग, फॉन्ट, ध्वनी, स्क्रीनसेव्हर, डेस्कटॉप चिन्ह, माउस पॉइंटर, चित्रे खाते, व्हिज्युअल इफेक्ट्स, गॅझेट्स आणि स्क्रीन पर्याय.

विषय
बदलण्यासाठी आणि सानुकूलित करण्यासाठी विंडोज थीम 7 तुम्हाला आवश्यक आहे: नियंत्रण पॅनेलवर जा...

0 0

विंडोज डेस्कटॉप आयकॉन्सचा आकार कसा बदलायचा हे बहुतेक वापरकर्त्यांना आधीच माहित आहे. त्याच वेळी, लोकांचा दुसरा भाग त्यांना बदलण्याच्या आणि डीफॉल्टनुसार आकार सेट करण्याच्या संधीचा कधीही फायदा घेत नाही. डेस्कटॉपवरील चिन्हांचा आकार अतिशय जलद आणि तृतीय-पक्ष सॉफ्टवेअरशिवाय बदलला जाऊ शकतो हे माहित नसल्यामुळे बहुधा हे घडले आहे.

तुम्ही Windows 7, Windows 8 आणि Windows 10 मधील डेस्कटॉप चिन्हांचा आकार बदलण्यासाठी दिलेल्या तीन पद्धतींपैकी एक वापरू शकता.

टीप: एकाच वेळी घ्या विविध आकारडेस्कटॉपवर चिन्ह किंवा चिन्ह (आपल्या इच्छेनुसार). विंडोज डेस्कटॉपते काम करणार नाही. पण असणे विविध आकारटाइल चिन्ह आणि मेनू शॉर्टकट विंडोज स्टार्ट 10 अगदी शक्य आहे.

पद्धत 1: माउस व्हील स्क्रोल वापरून डेस्कटॉप चिन्हांचा आकार बदलणे

तुमच्या डेस्कटॉपवर असताना, फक्त तुमचा कीबोर्ड दाबून ठेवा CTRL की(डावीकडे किंवा उजवीकडे - काही फरक पडत नाही), आणि नंतर माउस व्हील वर स्क्रोल करा - ते...

0 0

वैयक्तिकरण संकल्पना प्रथम मध्ये दिसून आली विंडोज व्हिस्टा. हा अनेक यंत्रणांचा एक संच आहे, जो एका "छताखाली" एकत्रित आहे, ज्याच्या मदतीने आपण ऑपरेटिंग सिस्टम इंटरफेसच्या स्वरूपावर प्रभाव टाकू शकता. इंटरफेसमध्ये काही सुधारणा आणि अतिरिक्त प्रभावांचा वापर करून ही यंत्रणा व्यावहारिकदृष्ट्या अपरिवर्तित नवीन ऑपरेटिंग सिस्टममध्ये हस्तांतरित करण्यात आली.

पूर्वीप्रमाणे, वैयक्तिकरण यंत्रणा नियंत्रण पॅनेलवर स्थित आहे (चित्र 7.1).

तांदूळ. ७.१. वैयक्तिकरण घटक लाँच करा

पर्सनलायझेशन मेकॅनिझम वापरून, तुम्हाला कस्टमायझेशनमध्ये प्रवेश आहे खालील पॅरामीटर्ससिस्टम इंटरफेस:

p डेस्कटॉप थीम;

p डेस्कटॉप पार्श्वभूमी;

p विंडो रंग;

आर आवाज;

p स्क्रीनसेव्हर्स;

p डेस्कटॉप चिन्ह;

p माउस पॉइंटर्स;

आर खाते चित्र.

चला या पॅरामीटर्सचा थोडक्यात विचार करूया.

७.१. डेस्कटॉप थीम

डेस्कटॉपची व्हिज्युअल डिझाईन ही पहिली गोष्ट आहे जी तुमच्या नजरेला खिळवून ठेवते...

0 0

10

प्रत्येक वापरकर्त्याला ते आवडेल असे नाही मानक डिझाइनडेस्कटॉप आणि संपूर्ण ऑपरेटिंग रूम वातावरण विंडोज सिस्टम्स 7. जर तुम्हाला डिझाइनमध्ये काहीतरी असामान्य हवे असेल किंवा तुमचे डोळे थकले असतील पांढराफॉन्ट, बदलले जाऊ शकते मानक सेटिंग्जआणि तुमचे स्वतःचे अद्वितीय ग्राफिक डिझाइन तयार करा.

तुम्हाला लागेल

संगणक;
- इंटरनेट;
- प्रशासक अधिकार.

P&G द्वारे प्रायोजित "डेस्कटॉपवरील फॉन्टचा रंग कसा बदलायचा" या विषयावर शॉर्टकटची पार्श्वभूमी कशी काढायची डेस्कटॉपवरील चिन्हांची निवड कशी रद्द करावी डेस्कटॉपचा आकार कसा कमी करायचा

सूचना

"प्रारंभ" बटणावर क्लिक करा आणि "नियंत्रण पॅनेल" निवडा. "डिझाइन" विभाग शोधा आणि त्यावर क्लिक करा. तुम्हाला सेटिंग्ज क्षेत्रात नेले जाईल ग्राफिक डिझाइनविंडोज 7. तुम्ही डेस्कटॉपवर असलेल्या “माय कॉम्प्युटर” शॉर्टकटवर देखील क्लिक करू शकता. वैयक्तिक संगणक. पुढे, डाव्या बाजूला, "नियंत्रण पॅनेल" नावाचा टॅब शोधा.

यादीत शोधा...

0 0

CSS3 ॲनिमेशनसाइट्सना गतिशीलता देते. हे वेब पृष्ठांना जिवंत करते, वापरकर्ता अनुभव सुधारते. CSS3 संक्रमणांच्या विपरीत, ॲनिमेशन निर्मिती ही कीफ्रेमवर आधारित असते, जी तुम्हाला दिलेल्या वेळेसाठी आपोआप प्ले करू आणि इफेक्ट्सची पुनरावृत्ती करू देते, तसेच लूपमध्ये ॲनिमेशन थांबवू देते.

CSS3 ॲनिमेशन जवळजवळ सर्व html घटकांसाठी वापरले जाऊ शकते, तसेच:पूर्वी आणि:छद्म-घटकांसाठी. ॲनिमेटेड गुणधर्मांची यादी पृष्ठावर दिली आहे. ॲनिमेशन तयार करताना, विसरू नका संभाव्य समस्याकार्यक्षमतेसह, कारण काही गुणधर्म बदलण्यासाठी भरपूर संसाधने आवश्यक आहेत.

CSS ॲनिमेशनचा परिचय

ब्राउझर समर्थन

IE: 10.0
फायरफॉक्स: 16.0, 5.0 -moz-
Chrome:४३.०, ४.० -वेबकिट-
सफारी:४.० -वेबकिट-
ऑपेरा:१२.१, १२.० -ओ-
iOS सफारी: 9, 7.1 -वेबकिट-
ऑपेरा मिनी: —
Android ब्राउझर: ४४, ४.१ -वेबकिट-
क्रोम Android साठी: 44

1. @keyframes नियम

ॲनिमेशन निर्मिती स्थापनेपासून सुरू होते मुख्य फ्रेम्स@keyframes नियम. कोणत्या पायरीवर कोणते गुणधर्म ॲनिमेट केले जातील हे फ्रेम्स ठरवतात. प्रत्येक फ्रेममध्ये एक किंवा अधिक मालमत्ता आणि मूल्य जोड्यांचे एक किंवा अधिक घोषणा ब्लॉक समाविष्ट असू शकतात. @keyframes नियमामध्ये घटकाच्या ॲनिमेशनचे नाव असते, जे नियम आणि घटकाच्या घोषणा ब्लॉकला जोडते.

@keyframes सावली ( पासून (मजकूर-छाया: 0 0 3px काळा;) 50% (मजकूर-छाया: 0 0 30px काळा;) ते (मजकूर-छाया: 0 0 3px काळा;) )

कीफ्रेम्स कडून आणि टू कीवर्ड (मूल्य 0% आणि 100% च्या समतुल्य) वापरून किंवा टक्केवारी बिंदू वापरून तयार केल्या जातात, जे तुम्हाला हवे तितके निर्दिष्ट केले जाऊ शकतात. आपण कीवर्ड आणि टक्केवारी गुण देखील एकत्र करू शकता. जर फ्रेम्समध्ये समान गुणधर्म आणि मूल्ये असतील तर ते एका घोषणेमध्ये एकत्र केले जाऊ शकतात:

@keyframes हलवा ( पासून, वर (वर: 0; डावीकडे: 0; ) 25%, 75% (शीर्ष: 100%;) 50% (शीर्ष: 50%;) )

जर 0% किंवा 100% फ्रेम निर्दिष्ट केल्या नसतील, तर वापरकर्त्याचा ब्राउझर ॲनिमेटेड मालमत्तेची गणना केलेली (मूळ सेट केलेली) मूल्ये वापरून तयार करतो. दोन कीफ्रेममध्ये समान निवडक असल्यास, त्यानंतरचा एक मागील एक रद्द करेल.

एकदा @keyframes नियम घोषित केल्यावर, आम्ही त्याचा संदर्भ ॲनिमेशन प्रॉपर्टीमध्ये करू शकतो:

H1 ( फॉन्ट-आकार: 3.5em; रंग: डार्कमॅजेन्टा; ॲनिमेशन: शॅडो 2s अनंत सहज-इन-आउट;)

ॲनिमेट करण्याची शिफारस केलेली नाही संख्यात्मक मूल्ये(दुर्मिळ अपवादांसह), कारण ब्राउझरमधील परिणाम अप्रत्याशित असू शकतो. तुम्ही मालमत्ता मूल्यांसाठी कीफ्रेम देखील तयार करू नये ज्यामध्ये मध्यबिंदू नसतात, जसे की मालमत्ता मूल्ये रंग: गुलाबी आणि रंग: #ffffff , रुंदी: स्वयं आणि रुंदी: 100px , किंवा सीमा-त्रिज्या: 0 आणि सीमा- त्रिज्या: 50% (या प्रकरणात, सीमा-त्रिज्या निर्दिष्ट करणे योग्य असेल: 0%).

2. ॲनिमेशन नाव ॲनिमेशन-नाव

मालमत्ता ॲनिमेशनचे नाव निर्दिष्ट करते. ॲनिमेशन नाव @keyframes नियमात तयार केले आहे. ॲनिमेशनचे सार प्रतिबिंबित करणारे नाव वापरण्याची शिफारस केली जाते आणि तुम्ही स्पेस - किंवा अंडरस्कोर वर्ण _ वापरून एकत्र जोडलेले एक किंवा अधिक शब्द वापरू शकता. मालमत्ता वारसा हक्काने मिळत नाही.

वाक्यरचना

Div (ॲनिमेशन-नाव: mymove;)

3. ॲनिमेशन कालावधी ॲनिमेशन-कालावधी

मालमत्ता ॲनिमेशनचा कालावधी सेट करते, सेकंद किंवा मिलिसेकंदांमध्ये सेट करते, नकारात्मक मूल्यांना परवानगी नाही. वारसा नाही. एखाद्या घटकासाठी एकापेक्षा जास्त ॲनिमेशन निर्दिष्ट केले असल्यास, तुम्ही सेट करू शकता वेगवेगळ्या वेळाप्रत्येकासाठी, स्वल्पविरामाने विभक्त केलेली मूल्ये सूचीबद्ध करणे.

वाक्यरचना

Div (ॲनिमेशन-कालावधी: 2s;)

4. टाइमिंग फंक्शन ॲनिमेशन-टाइमिंग-फंक्शन

गुणधर्म वेळेच्या फंक्शन्सचा वापर करून ॲनिमेशनच्या सुरुवातीपासून शेवटपर्यंत गतीमधील बदल परिभाषित करते. कीवर्ड किंवा बेझियर वक्र क्यूबिक-बेझियर (x1, y1, x2, y2) वापरून निर्दिष्ट केले आहे. वारसा नाही.

ॲनिमेशन-टाइमिंग-फंक्शन
मूल्ये:
सहजता	डीफॉल्ट वैशिष्ट्य, ॲनिमेशन हळू सुरू होते, त्वरीत वेगवान होते आणि शेवटी मंद होते. क्यूबिक-बेझियर (0.25,0.1,0.25,1) शी संबंधित आहे.
रेखीय	ॲनिमेशन संपूर्ण वेळेत समान रीतीने घडते, वेगात चढ-उतार न होता. क्यूबिक-बेझियर (0,0,1,1) शी संबंधित आहे.
सहजता	ॲनिमेशन हळूहळू सुरू होते आणि नंतर सहजतेने शेवटी गती वाढते. क्यूबिक-बेझियर (0.42,0,1,1) शी संबंधित आहे.
सहज बाहेर पडणे	ॲनिमेशन त्वरीत सुरू होते आणि शेवटी सहजतेने कमी होते. क्यूबिक-बेझियर(0,0,0.58,1) शी संबंधित आहे.
सहज बाहेर पडणे	ॲनिमेशन हळूहळू सुरू होते आणि हळूहळू संपते. क्यूबिक-बेझियर (0.42,0,0.58,1) शी संबंधित आहे.
क्यूबिक-बेझियर(x1, y1, x2, y2)	तुम्हाला 0 ते 1 पर्यंत मूल्ये व्यक्तिचलितपणे सेट करण्याची परवानगी देते. तुम्ही ॲनिमेशन बदलाच्या गतीचा कोणताही मार्ग तयार करू शकता.
चरण-प्रारंभ	स्टेप बाय स्टेप ॲनिमेशन सेट करते, ॲनिमेशनला सेगमेंटमध्ये मोडून प्रत्येक पायरीच्या सुरुवातीला बदल होतात. चरणांच्या समतुल्य (1, प्रारंभ).
स्टेप-एंड	चरण-दर-चरण ॲनिमेशन, प्रत्येक चरणाच्या शेवटी बदल होतात. चरणांच्या समतुल्य (1, शेवट).
पायऱ्या(पायऱ्यांची संख्या,सुरुवात|शेवट)	स्टेप टाइम फंक्शन जे दोन पॅरामीटर्स घेते. चरणांची संख्या सकारात्मक पूर्णांकाने निर्दिष्ट केली आहे. दुसरा पॅरामीटर ऐच्छिक आहे; ज्या क्षणी ॲनिमेशन सुरू होते ते निर्दिष्ट करते. व्हॅल्यू स्टार्टसह ॲनिमेशन प्रत्येक पायरीच्या सुरुवातीला सुरू होते, प्रत्येक पायरीच्या शेवटी विलंबासह मूल्य समाप्त होते. ॲनिमेशन वेळेला पायऱ्यांच्या संख्येने विभाजित करून विलंबाची गणना केली जाते. दुसरा पॅरामीटर निर्दिष्ट न केल्यास, डीफॉल्ट मूल्य समाप्ती वापरली जाते.
प्रारंभिक	गुणधर्म मूल्य डीफॉल्ट मूल्यावर सेट करते.
वारसा	मूळ घटकाकडून मालमत्ता मूल्य प्राप्त होते.

वाक्यरचना

Div (ऍनिमेशन-टाइमिंग-फंक्शन: रेखीय;)

वापरून चरण-दर-चरण ॲनिमेशनतयार केले जाऊ शकते मनोरंजक प्रभाव, जसे की मजकूर छापला जात आहे किंवा लोडिंग इंडिकेटर.

5. विलंब असलेले ॲनिमेशन ॲनिमेशन-विलंब

मालमत्ता विशिष्ट वेळेसाठी ॲनिमेशनकडे दुर्लक्ष करते, ज्यामुळे प्रत्येक ॲनिमेशन स्वतंत्रपणे चालवणे शक्य होते. नकारात्मक विलंब त्याच्या चक्रातील एका विशिष्ट बिंदूपासून ॲनिमेशन सुरू करतो, उदा. विलंबामध्ये निर्दिष्ट केलेल्या वेळेपासून. हे तुम्हाला केवळ विलंब वेळ बदलून एकाधिक फेज-शिफ्ट केलेल्या घटकांवर ॲनिमेशन लागू करण्यास अनुमती देते.

ॲनिमेशन मध्यापासून सुरू करण्यासाठी, तुम्हाला ॲनिमेशन-कालावधीमध्ये सेट केलेल्या अर्ध्या वेळेइतका ऋण विलंब सेट करणे आवश्यक आहे. वारसा नाही.

वाक्यरचना

Div (ॲनिमेशन-विलंब: 2s;)

6. ॲनिमेशन ॲनिमेशन-पुनरावृत्ती-गणना पुन्हा करा

मालमत्ता तुम्हाला अनेक वेळा ॲनिमेशन चालवण्याची परवानगी देते. मूल्य 0 किंवा कोणतेही ऋण संख्याप्लेबॅकमधून ॲनिमेशन काढा. वारसा नाही.

वाक्यरचना

Div (ऍनिमेशन-पुनरावृत्ती-गणना: 3;)

7. ॲनिमेशन दिशा ॲनिमेशन-दिशा

ॲनिमेशन कोणत्या दिशेने पुनरावृत्ती होते ते गुणधर्म निर्दिष्ट करते. जर ॲनिमेशन फक्त एकदाच पुनरावृत्ती होत असेल तर या गुणधर्माला काही अर्थ नाही. वारसा नाही.

वाक्यरचना

Div (ॲनिमेशन-दिशा: पर्यायी;)

8. ॲनिमेशनचे संक्षिप्त रेकॉर्डिंग

सर्व ॲनिमेशन प्लेबॅक पॅरामीटर्स एका मालमत्तेत एकत्र केले जाऊ शकतात - ॲनिमेशन , त्यांना एका जागेद्वारे विभक्त करून सूचीबद्ध करणे:

ॲनिमेशन: ॲनिमेशन-नाव ॲनिमेशन-कालावधी ॲनिमेशन-टाइमिंग-फंक्शन ॲनिमेशन-विलंब ॲनिमेशन-पुनरावृत्ती-गणना ॲनिमेशन-दिशा;

ॲनिमेशन प्ले करण्यासाठी, फक्त दोन गुणधर्म निर्दिष्ट करणे पुरेसे आहे - ॲनिमेशन-नाव आणि ॲनिमेशन-कालावधी , उर्वरित गुणधर्म त्यांची डीफॉल्ट मूल्ये घेतील. गुणधर्म ज्या क्रमाने सूचीबद्ध केले आहेत ते काही फरक पडत नाही, फक्त एक गोष्ट अशी आहे की ॲनिमेशन-कालावधीची अंमलबजावणी वेळ ॲनिमेशन-विलंब विलंबापूर्वी येणे आवश्यक आहे.

9. ॲनिमेशन ॲनिमेशन-प्ले-स्टेट प्ले करणे

मालमत्ता ॲनिमेशनचे प्लेबॅक आणि थांबणे नियंत्रित करते. मध्ये या गुणधर्माचा वापर करून लूपमध्ये ॲनिमेशन थांबवणे शक्य आहे JavaScript स्क्रिप्ट. जेव्हा तुम्ही ऑब्जेक्टवर माउस फिरवता तेव्हा तुम्ही ॲनिमेशन देखील थांबवू शकता - state:hover. वारसा नाही.

वाक्यरचना

Div:hover (ॲनिमेशन-प्ले-स्टेट: विराम दिला;)

10. ॲनिमेशन ॲनिमेशन-फिल-मोड प्ले करण्यापूर्वी आणि नंतर घटकाची स्थिती

गुणधर्म @keyframes मध्ये परिभाषित केलेल्या शैली ऑब्जेक्टवर कोणत्या क्रमाने लागू केल्या जातात ते ठरवते. वारसा नाही.

ॲनिमेशन-फिल-मोड
मूल्ये:
काहीही नाही	डीफॉल्ट मूल्य. ॲनिमेशन प्ले होण्यापूर्वी किंवा नंतर घटकाची स्थिती बदलत नाही.
पुढे	एकदा ॲनिमेशन संपल्यावर (ॲनिमेशन-पुनरावृत्ती-गणना मूल्याद्वारे निर्धारित केल्याप्रमाणे), ॲनिमेशन संपेल तेव्हा ॲनिमेशन गुणधर्म मूल्ये लागू करेल. जर ॲनिमेशन-पुनरावृत्ती-गणना शून्यापेक्षा जास्त, ॲनिमेशनच्या शेवटच्या पूर्ण झालेल्या पुनरावृत्तीच्या समाप्तीची मूल्ये लागू केली जातात (पुढील पुनरावृत्तीच्या प्रारंभाची मूल्ये नाहीत). ॲनिमेशन-पुनरावृत्ती-गणना शून्य असल्यास, लागू केलेली मूल्ये ती असतील जी प्रथम पुनरावृत्ती सुरू करतात (ॲनिमेशन-फिल-मोड प्रमाणे: मागे;).
मागे	ॲनिमेशन-विलंब सह परिभाषित कालावधी दरम्यान, ॲनिमेशन कीफ्रेममध्ये परिभाषित केलेली गुणधर्म मूल्ये लागू करेल, जे ॲनिमेशनचे प्रथम पुनरावृत्ती सुरू करेल. ही एकतर कीफ्रेम मूल्ये (जेव्हा ॲनिमेशन-दिशा: सामान्य किंवा ॲनिमेशन-दिशा: वैकल्पिक) किंवा कीफ्रेम मूल्ये (जेव्हा ॲनिमेशन-दिशा: उलट किंवा ॲनिमेशन-दिशा: वैकल्पिक).

सर्व नमस्कार. मला अलीकडेच या विषयावरील अतिशय उपयुक्त आणि मनोरंजक व्हिडिओ ट्यूटोरियलची मालिका मिळाली. CSS ॲनिमेशन" पण दुर्दैव, सर्व व्हिडिओ चालू होते इंग्रजी, आणि, कदाचित, प्रत्येक लेआउट डिझायनरला सर्व आवश्यक माहिती समजून घेण्यासाठी आणि आत्मसात करण्यासाठी पुरेशा स्तरावर इंग्रजी येत नाही. म्हणून, मी तुमच्यासाठी या धड्यांचे भाषांतर करण्याचा निर्णय घेतला (किंवा त्याऐवजी विनामूल्य भाषांतर करा). आभार मानण्याची गरज नाही. त्यामुळे:

1. CSS ॲनिमेशन. परिचय + संक्रमण गुणधर्म(हा लेख)
2. CSS ॲनिमेशन. कीफ्रेम - लवकरच येत आहे
3. CSS ॲनिमेशन कधी आणि का वापरायचे? - लवकरच येत आहे

CSS ॲनिमेशन म्हणजे काय?

CSS ॲनिमेशन कसे बनवायचे आणि ते का आवश्यक आहेत हे सांगण्यापूर्वी, मी तुम्हाला प्रथम स्पष्ट करू इच्छितो, काय झाले आहेCSS ॲनिमेशन, व्याख्या किंवा काहीतरी द्या.

वेबवरील ॲनिमेशनच्या दोन मुख्य कल्पना आहेत. पहिली कल्पना - काहीतरी जिवंत करा. तुम्ही डॉ. फ्रँकेन्स्टाईनसारखे आहात. तुमच्याकडे एक निर्जीव राक्षस आहे आणि तुम्ही त्यात जीव फुंकता. दुसरा - मोशन व्हिज्युअलायझेशन. आणि कीवर्डयेथे ते तंतोतंत "हालचाल" आहे.

ॲनिमेट कसे करावे?

CSS मध्ये दोन मुख्य साधने आहेत ज्यांच्या मदतीने आपण वेब पृष्ठाभोवती घटक हलवू शकतो. पहिली (ज्याबद्दल आपण आज बोलू) मालमत्ता आहे संक्रमण. सर्व प्रथम, त्याच्या मदतीने आम्ही CSS मध्ये ॲनिमेशन तयार करतो. दुसरे साधन म्हणजे मालमत्ता कीफ्रेमसह जोडलेले ॲनिमेशन(@keyframes – की फ्रेम्स). पुढील धड्यात आपण हे साधन अधिक तपशीलाने पाहू, परंतु आत्ता आपण पाहू CSS गुणधर्मसंक्रमण आणि मग आम्ही पृष्ठावर काय ॲनिमेशन केले पाहिजे (जेव्हा वापरकर्त्याला त्याची आवश्यकता असेल) आणि काय ॲनिमेटेड नसावे (जेव्हा ॲनिमेशन मूर्ख आणि अयोग्य दिसते) यावर आधारित चर्चा करू. वापरकर्ता अनुभव(UX - वापरकर्ता अनुभव).

CSS संक्रमण गुणधर्म - मापदंड आणि मूल्ये

वाक्यरचना

प्रथम, हा गुणधर्म कसा वाचला जातो ते पाहू आणि त्याची वाक्यरचना कशी समजून घेऊ. आम्ही ही मालमत्ता असे काहीतरी लिहितो:

संक्रमण: [मालमत्ता] [कालावधी] [वेळेचे कार्य] [विलंब] ;

संक्रमण: उंची 1s सहज बाहेर 0.2s ;

आम्ही ॲनिमेट करू इच्छित असल्या घटकाला ही प्रॉपर्टी नियुक्त करतो. हा घटक गुळगुळीत होतो संक्रमण(किंवा पायरीच्या दिशेने) त्याच्या अनेक अवस्थांमध्ये (उदाहरणार्थ, उंची 100 पिक्सेल आणि उंची 200 पिक्सेल). आणि हे कसे दिसेल संक्रमण(इंग्रजी संक्रमणातून), आम्ही दिलेल्या पॅरामीटर्सवर अवलंबून असेल.

संक्रमण गुणधर्माचा पहिला पॅरामीटर (मूल्य) दुसरा आहे मालमत्ताॲनिमेटेड घटक (उदाहरणार्थ, उंची).

दुसरा पॅरामीटर ॲनिमेशनचा कालावधी (कालावधी) आहे, म्हणजेच घटकाला एका स्थितीतून दुसऱ्या स्थितीत जाण्यासाठी किती वेळ लागेल (उदाहरणार्थ, 2s किंवा 2000ms).

तिसरा पॅरामीटर आहे वेळेचे कार्य [वेळकार्य] (आयजिंग फंक्शन [ सुलभ करणेकार्य]). संपूर्ण वेळेत ॲनिमेशनची तीव्रता कशी वितरित केली जाईल. उदाहरणार्थ, ॲनिमेशन अचानक सुरू होऊ शकते, परंतु शेवटी ते मंद होईल आणि संक्रमण सहजतेने समाप्त होईल. कीवर्ड म्हणून वापरले जाऊ शकते (उदाहरणार्थ, सहजतासहज-मध्ये-बाहेररेखीय), आणि बेझियर क्यूब फंक्शन्स (उदाहरणार्थ, घन-बेझियर(०.१७, ०.६७, ०.८३, ०.६७)). तुम्ही http://cubic-bezier.com या संसाधनावर बेझियर क्यूब सहज आणि सोयीस्करपणे सानुकूलित करू शकता, तसेच फ्रेम-बाय-फ्रेम ॲनिमेशन (स्टेप-बाय-स्टेप) तयार करण्यासाठी स्टेप्स फंक्शन.

आणि शेवटी, पॅरामीटर विलंब. ॲनिमेशन विलंब म्हणजे ॲनिमेशन (आमच्या बाबतीत, संक्रमण) सुरू होण्यापूर्वी तुम्हाला वाट पाहावी लागणारी वेळ.

CSS संक्रमण ॲनिमेशन उदाहरण

हे बघूया CSS उदाहरणॲनिमेशन:

संक्रमण: अपारदर्शकता 300ms इझी-इन-आउट 1s;

येथे आम्ही केवळ मालमत्ता ॲनिमेट करतो अपारदर्शकता(अपारदर्शकता). याचा अर्थ असा की जर आपण ॲनिमेट करणार असलेल्या घटकामध्ये उंची, रुंदी किंवा रंग यासारखे इतर गुणधर्म असतील आणि जरी हे गुणधर्म भिन्न असले तरीही विविध राज्येघटक, नंतर गुळगुळीत संक्रमण(ऍनिमेशन) फक्त उपलब्ध असेल अस्पष्टता गुणधर्म. समजलं का?

विशिष्ट मालमत्तेऐवजी, आपण कीवर्ड देखील वापरू शकता " सर्व" याचा अर्थ असा की आम्ही घटकाच्या नवीन स्थितीत (फक्त अपारदर्शकता नव्हे) बदललेल्या घटकाचे सर्व गुणधर्म ॲनिमेट करतो आणि जे अजिबात ॲनिमेट केले जाऊ शकतात. कारण, तुम्हाला माहिती आहे की, सर्व गुणधर्म ॲनिमेटेड असू शकत नाहीत. पण त्याबद्दल अधिक थोड्या वेळाने.

दुसरा पॅरामीटर ( 300 ms) आम्हाला सांगते की ॲनिमेशन फक्त 300 मिलिसेकंद टिकेल. म्हणजेच, घटक त्वरीत दिसून येईल किंवा त्वरीत विरघळेल, त्याच्या दोन अवस्थेतील गुणधर्म मूल्यांवर अवलंबून.

वेळेचे कार्य ( सहज-मध्ये-बाहेर) तिसरे पॅरामीटर ॲनिमेशनची सुरुवात आणि शेवट नितळ करेल.

विलंब ( 1 s) ॲनिमेशन सुरू होण्यापूर्वी किती उशीर झाला पाहिजे हे दाखवते.

सर्वसाधारणपणे, आम्ही संक्रमण ॲनिमेशन कसे रेकॉर्ड करू याचे हे सूत्र आहे. हे वाक्यरचना आहे. आवश्यक असल्यास, तुम्ही एका घटकासाठी एकापेक्षा जास्त [मालमत्ता] संक्रमण जोडू शकता. उदाहरणार्थ, आपण सह ॲनिमेट करू शकता भिन्न मापदंडघटकाची उंची आणि रुंदी बदलणे. हे करण्यासाठी, संक्रमण गुणधर्मामध्ये, शेवटी अर्धविराम ऐवजी, फक्त स्वल्पविराम लावा आणि दुसऱ्या प्रॉपर्टीसाठी पॅरामीटर्स लिहा. आणि ते कार्य करण्यासाठी नंतर शेवटी अर्धविराम ठेवण्यास विसरू नका.

तुम्ही CSS मध्ये काय ॲनिमेट करू शकता?

आतापर्यंत आम्ही फक्त संक्रमण गुणधर्माच्या वाक्यरचनावर चर्चा केली आहे. आता गुणधर्मांबद्दल बोलूया, कोणते आपण ॲनिमेट करू शकतो आणि कोणते करू शकत नाही. कारण अशा काही गोष्टी आहेत ज्यांना केवळ ॲनिमेट करण्यात अर्थ नाही आणि काही गुणधर्म फक्त ॲनिमेटेड होऊ शकत नाहीत.

सजीव गुणधर्म

उदाहरणार्थ, गुणधर्म घ्या जसे की:

1. फॉन्ट-आकार;
2. पार्श्वभूमी-रंग;
3. रुंदी;
4. डावीकडे (घटक डाव्या बाजूपासून किती दूर हलविला जाऊ शकतो [स्थितीत]…

साहजिकच, हे गुणधर्म ॲनिमेट करण्यात अर्थ प्राप्त होतो. तुम्ही त्यांची मूल्ये बदलल्यास, ते घटक दृश्यमानपणे बदलेल. जर तुम्ही फॉन्टचा आकार 14 ते 28 पिक्सेल पर्यंत बदलला, तर तुम्हाला दिसेल की फॉन्टचा आकार हळूहळू वाढतो आणि एक ॲनिमेशन तयार होते जे काही काळ टिकते. मालमत्ता मूल्ये स्पष्ट (सामान्यतः संख्यात्मक) मूल्ये असल्यास ॲनिमेशन नेहमीच अर्थपूर्ण ठरते. तुम्ही फॉन्टचा आकार 100 पिक्सेलपर्यंत वाढवल्यास, तुम्ही अक्षरे वाढताना स्पष्टपणे पाहू शकता. पार्श्वभूमीच्या रंगात एक गुळगुळीत बदल देखील पाहिला जाऊ शकतो [कारण वेबवर रंग आहे अंकीय कोड, उदाहरणार्थ, लाल rgb(२५५,०,०)]. हे गुणधर्म ॲनिमेटेड आहेत.

सर्वसाधारणपणे, लक्षात ठेवा, जर आपण कल्पना केली की ते ॲनिमेटेड आहे, तर ते ॲनिमेटेड असू शकते. बर्याचदा हे कार्य करते.

प्राणी नसलेले गुणधर्म

आणि येथे ॲनिमेटेड नसलेल्या गुणधर्मांची सूची आहे (उदाहरण):

1. प्रदर्शन;
2. फॉन्ट-फॅमिली;
3. स्थिती...

हे त्यापैकी काही आहेत जे मी एक उदाहरण म्हणून घेतले जेणेकरून तुम्हाला सजीव आणि नॉन-एनिमेबल CSS गुणधर्मांमधील फरक जाणवेल.

चला डिस्प्ले घेऊ. आपण कल्पना करू शकता की "मध्यभागी किती बदल झाला आहे प्रदर्शन:ब्लॉक;"आणि " प्रदर्शन:इनलाइन-ब्लॉक;"? घटकाचे स्वरूप सहजतेने कसे बदलू शकते " स्थिती:नातेवाईक"आणि" स्थिती:निरपेक्ष;"? नाही, अर्थातच, हे गुणधर्म बदलल्यास घटक वेगळे दिसतील. पण तुम्ही कल्पना कशी करू शकता संक्रमण? तुम्ही ते करू शकत नाही. बरोबर? आपण फॉन्ट बदलण्याची कल्पना करू शकत नाही हेल्वेटिकाफॉन्ट मध्ये जॉर्जिया, प्रत्येक अक्षर, ते कार्य करणार नाही. तुम्ही हे फॉन्ट बदलू शकता, परंतु ते अचानक बदलतील आणि कोणतेही ॲनिमेशन होणार नाही.

CSS मध्ये ॲनिमेशन परफॉर्मन्स

सर्वसाधारणपणे, अनेक गुणधर्म ॲनिमेटेड असतात, परंतु काही नसतात. आता ॲनिमेट करण्यासाठी कोणते सजीव गुणधर्म चांगले आहेत आणि कोणते वाईट आहेत ते ठरवूया. याबद्दल आहेउत्पादकता बद्दल. आम्ही कार्यप्रदर्शनाच्या विषयाला स्पर्श केला कारण ॲनिमेशन ही एक संसाधन-केंद्रित प्रक्रिया आहे.

सर्वसाधारणपणे, ॲनिमेशनसाठी सर्वोत्तम काम करणाऱ्या गोष्टी येथे आहेत:

1. पृष्ठावर स्थान देणे
2. स्केलिंग
3. रोटेशन
4. पारदर्शकता

शिवाय, या यादीतील पहिले तीन आयटम ट्रान्सफॉर्म प्रॉपर्टीचे सर्व पॅरामीटर्स आहेत (अनुवाद, स्केल, फिरवा). X आणि Y अक्षांसह पोझिशनिंग होते.

तुम्ही इतर काहीही ॲनिमेट करण्याचे ठरवल्यास, तुम्हाला 60 फ्रेम्स प्रति सेकंदाचे मऊ, गुळगुळीत संक्रमण न मिळण्याचा धोका आहे. पॉल लुईस आणि आयरिश

आणि जेव्हा आपण ॲनिमेशन कामगिरीबद्दल बोलतो तेव्हा आपल्याला यातच रस असतो. सर्वसाधारणपणे, ॲनिमेशनसाठी सर्वात योग्य गुणधर्म आहेत परिवर्तन आणिअपारदर्शकता. इतर काहीही ॲनिमेट करताना, ॲनिमेशनचा fps 60fps पेक्षा खूपच खाली येऊ शकतो.

हा मुद्दा खालीलप्रमाणे सारांशित करू. वेब पृष्ठावरील घटक पुन्हा रेखाटणे आणि ब्राउझरला रेंडर करणे कठीण असलेले घटक ॲनिमेट करणे टाळण्याचा प्रयत्न करा (उदाहरणार्थ, सावल्या).

CSS मध्ये ॲनिमेशन कसे बनवायचे?

आता ॲनिमेशन कसे सुरू करायचे ते पाहू. घटक सजीव होण्यासाठी काय करावे लागेल. दुसऱ्या शब्दांत, मध्ये ॲनिमेशन कसे बनवायचेCSS.

हे अवघड नाही आणि करण्यासारखे बरेच काही आहे वेगवेगळ्या मार्गांनी. पण 2 मुख्य गोष्टी आहेत ज्या तुम्ही न चुकता पार पाडल्या पाहिजेत. पहिला मार्ग आहे घटकावर फिरत असताना ॲनिमेशन(स्यूडो-क्लास:होवर). तुम्ही तुमचा माऊस एखाद्या घटकावर फिरवा आणि ॲनिमेशन ट्रिगर होईल. अशा प्रकारे तुम्ही स्वतः घटक किंवा त्याच्या कोणत्याही मूल घटकांना ॲनिमेट करू शकता. मग ते कसे कार्य करते ते मी तुम्हाला दाखवतो. दुसरा मार्ग आहे घटक वर्ग बदलणे. म्हणजेच, तुमच्याकडे एक नियमित घटक आहे, तुम्ही त्याचा वर्ग पूर्णपणे भिन्न शैली असलेल्या वर्गात बदलता (किंवा जोडता). तुम्ही वर्ग जोडल्यास, ॲनिमेशन होईल आणि तुम्ही वर्ग काढून टाकल्यास, उलट ॲनिमेशन होईल. या चांगला मार्गमेनू किंवा ड्रॉप-डाउन सूची ॲनिमेट करण्यासाठी.

नंतरचे शब्द

आम्हाला ॲनिमेशन तयार करण्यासाठी आवश्यक असलेली सर्व काही आम्ही कव्हर केली आहे शुद्ध CSS. आम्ही लवकरच ते शोधून काढू व्यावहारिक उदाहरणे, आणि थोड्या वेळाने - खूप मनोरंजक उदाहरणे.

तुम्ही अगदी शेवटपर्यंत वाचले का?

हा लेख उपयुक्त होता का?

खरंच नाही

तुम्हाला नक्की काय आवडले नाही? लेख अपूर्ण होता की खोटा?
टिप्पण्यांमध्ये लिहा आणि आम्ही सुधारण्याचे वचन देतो!