नऊ साधी CSS3 ॲनिमेशन उदाहरणे. CSS मधील CSS3 ॲनिमेशन ब्लरची नऊ साधी उदाहरणे
या संग्रहामध्ये सर्वोत्तम आणि उच्च दर्जाची CSS वैशिष्ट्ये आहेत. येथे तुम्हाला प्रसिद्ध लेआउट डिझायनर्स आणि डिझायनर्सची विविध आणि आश्चर्यकारक डेमो उदाहरणे आणि तंत्रे सापडतील जे सिद्ध करण्याचा प्रयत्न करीत आहेत की आता केवळ शुद्ध CSS वापरून जवळजवळ सर्व काही करणे शक्य आहे. तुम्हाला येथे अनेक धडे देखील मिळतील जे तुम्हाला अशी निर्मिती कशी करावी हे तपशीलवार सांगतात. मला आशा आहे की हा संग्रह तुम्हाला उपयुक्त ठरेल.
CSS 3D ढगया डेमोमध्ये तुम्ही 3D मध्ये फॅन्सी क्लाउड तयार आणि संपादित करण्यास सक्षम असाल. हे CSS क्लाउड्स आम्हाला हे स्पष्ट करतात की वेब तंत्रज्ञानाच्या शक्यता जवळजवळ अमर्याद आहेत.
ही फक्त शुद्ध CSS ने बनवलेल्या लोगोची उदाहरणे आहेत. जरा विचार करा, त्याच्या निर्मितीमध्ये कोणतीही प्रतिमा वापरली गेली नाही. हे फक्त काहीतरी आहे.
उत्कृष्ट आणि कलात्मक उदाहरणवर्णमाला मध्ये CSS वापरणे
साधे पण खूप स्टाइलिश पॅनेलसाइटसाठी नेव्हिगेशन, अर्थातच फक्त CSS3 वापरून केले. कोणतीही प्रतिमा किंवा स्क्रिप्ट नाहीत.
Google शोध इंजिनच्या अनेक डूडलपैकी एक, CSS मध्ये बनवलेले. CSS ॲनिमेशनच्या चांगल्या वापराचे हे उत्तम उदाहरण आहे.
एक उत्तम प्रकारे तयार केलेला आणि उच्च-गुणवत्तेचा प्रतिमा स्लाइडर. डेमोमध्ये प्लस 4 उदाहरणे.
जास्त CSS कोड नसलेली सुंदर ॲनिमेटेड आणि बहु-रंगीत रिंग
ते मला खूप वाटतं आवश्यक फिल्टर, विशेषतः ते शुद्ध CSS मध्ये बनवलेले असल्याने. अस्पष्टतेचा वापर करून, तुम्ही वापरकर्त्याचे लक्ष एका विशिष्ट बिंदूकडे आकर्षित करू शकता.
हा लेख प्रतिसादात्मक फ्लेक्सबॉक्स ब्लॉक्सबद्दल आहे. हे या ब्लॉक्सबद्दल पूर्णपणे बोलते, जरी लेख इंग्रजीमध्ये आहे.
चिन्हांसह वेबसाइटसाठी एक सुंदर ड्रॉप-डाउन मेनू. एक मोठा फायदा म्हणजे ते पूर्णपणे CSS मध्ये बनवले आहे.
इंग्रजीमध्ये उच्च-गुणवत्तेची सामग्री, जी प्रतिमांवर CSS फिल्टर वापरण्याबद्दल बोलते.
असंख्य उदाहरणांसह CSS फॉर्म बद्दलची पोस्ट
शुद्ध CSS आणि ॲनिमेशन वापरून स्टायलिश प्रोग्रेस बार कसे तयार करायचे याचा धडा. तुम्ही उदाहरण देखील पाहू शकता आणि स्त्रोत डाउनलोड करू शकता.
आज इंटरनेटवरील सर्वात लोकप्रिय CSS ॲनिमेशन प्रकल्प. आणि कदाचित सर्वात सोपी आणि सर्वोच्च गुणवत्ता आणि विनामूल्य देखील.
या लेखात आपण ॲनिमेशन वापरण्याच्या बारकाव्यांचा अभ्यास करत राहू, ॲनिमेशनला विराम देणे, ॲनिमेशनची दिशा यासारख्या CSS वैशिष्ट्यांचा अभ्यास करू, ॲनिमेशन प्ले होत नसताना घटकासाठी शैली कशी निर्दिष्ट करायची ते आपण पाहू. ॲनिमेशन तयार करण्यासाठी युनिव्हर्सल प्रॉपर्टीचा योग्य वापर कसा करायचा, आम्ही लायब्ररी कशी वापरायची ते कनेक्ट करू आणि शिकू ॲनिमेट.सीएसएस .
मी या वस्तुस्थितीकडे आपले लक्ष वेधून घेतो की या सामग्रीचा अभ्यास करण्यासाठी आपल्याला मागील लेख "" मध्ये प्राप्त करण्यासाठी आवश्यक असलेले ज्ञान आवश्यक असेल.
ॲनिमेशन स्थितीपुढील सोप्या गुणधर्मावर आपण ॲनिमेशन-प्ले-स्टेट पाहणार आहोत, ते ॲनिमेशनची स्थिती परिभाषित करते. ही मालमत्ता दोन संभाव्य कीवर्डपैकी एक पास केली आहे:
- चालू - ॲनिमेशन प्ले केले जाते (डीफॉल्ट मूल्य).
- विराम दिला - ॲनिमेशन थांबवले आहे.
या उदाहरणात आम्ही तयार केले साधे ॲनिमेशन, ज्यामध्ये सह CSS वापरूनडावे गुणधर्म वर्तमान स्थितीच्या डाव्या काठाशी संबंधित सापेक्ष स्थितीसह घटक ऑफसेट करतात.
माउस कर्सर (:hover() स्यूडो-क्लासच्या सहाय्याने घटकावर फिरवताना, ॲनिमेशन-प्ले-स्टेट गुणधर्म पॉझ्ड वर सेट करून ॲनिमेशनला विराम दिला जातो आणि जेव्हा कर्सर घटक सोडतो तेव्हा ॲनिमेशन पुन्हा सुरू होते.
आमच्या उदाहरणाचा परिणाम:
ॲनिमेशन दिशाजेनेरिक ॲनिमेशन गुणधर्म वापरून, आम्ही खालील ॲनिमेशन पॅरामीटर्स निर्दिष्ट केले:
- ॲनिमेशन नाव- iliketomoveit.
- ॲनिमेशन कालावधी- 4 सेकंद.
- गती वक्र- स्टेप ॲनिमेशन स्टेप्स (3,प्रारंभ). की फ्रेमच्या प्रत्येक भागासाठी ते तयार केले जाईल 3 पायऱ्या.
- ॲनिमेशन विलंब- 500 मिलीसेकंद.
- चक्रांची संख्या- अनंत (अनंत).
- ॲनिमेशन दिशा- उलट (विरुद्ध दिशेने).
आमच्या उदाहरणाचा परिणाम:
खालील उदाहरणाचा विचार करा ज्यामध्ये
CSS बॉडीवर ॲनिमेशन लोड करत आहे ( मार्जिन : 0 ; /* पॅडिंग */ पॅडिंग : 0 ; /* पॅडिंग */ ) .कंटेनर ( रुंदी : 100px ; /* घटक रुंदी */ पॅडिंग-टॉप : 100px ; /* पॅडिंग टॉप */ मार्जिन : 0 ऑटो; /* बाहेरील मार्जिनसह घटक मध्यभागी ठेवा */) div > div (डिस्प्ले: इनलाइन-ब्लॉक; /* नेस्टेड घटकांना ब्लॉक-लाइन (लाइन केलेले) */ रुंदी : 10px ; /* रुंदी घटक */ उंची : 10px ; /* घटकाची उंची */ समास : 0 स्वयं ; /* बाह्य समासासह घटकांना मध्यभागी ठेवा */ सीमा-त्रिज्या : /* कोपऱ्यांचा आकार निश्चित करा */ .item:nth-child( 1) (पार्श्वभूमी : नारिंगी ; /* पार्श्वभूमी रंग */ ॲनिमेशन : अप 1s रेखीय 1s अनंत ; .item:nth-child(2) (पार्श्वभूमी : वायलेट ; /* पार्श्वभूमी रंग */ ॲनिमेशन : अप 1s रेखीय 1.2s अनंत ; /* नाव कालावधी वेळ-कार्य विलंब पुनरावृत्ती-गणना */ ) .item:nth-child(3) (पार्श्वभूमी : किरमिजी रंग ; /* पार्श्वभूमी रंग */ ॲनिमेशन : अप 1s रेखीय 1.4s अनंत ; /* नाव कालावधी वेळ-कार्य विलंब पुनरावृत्ती-गणना */ ) .item:nth-child(4) (पार्श्वभूमी : lightseagreen ; /* background color */ animation : up 1s linear 1.6s infinite ; /* नाव कालावधी वेळ- कार्य विलंब पुनरावृत्ती-गणना */ ) .item:nth-child(5) (पार्श्वभूमी : फॉरेस्टग्रीन ; /* पार्श्वभूमी रंग */ ॲनिमेशन : अप 1s रेखीय 1.8s अनंत ; /* नाव कालावधी वेळ-फंक्शन विलंब पुनरावृत्ती-गणना * / ) @keyframes अप ( 0%, 100% ( /* ॲनिमेशन लूपचा प्रारंभ आणि शेवट */ ट्रान्सफॉर्म : translateY(-15px) ; /* घटक Y अक्षावर हलवा */ ) 50% ( /* ॲनिमेशनच्या मध्यभागी */ ट्रान्स्फॉर्म : भाषांतर (5px, 0) ; /* घटकाला X अक्षाच्या बाजूने 5px ने शिफ्ट करा, Y अक्षाच्या बाजूने कोणतेही शिफ्ट नाही */) )या उदाहरणात, आम्ही अनेक ॲनिमेशन तयार केले ज्यामध्ये, गुणधर्म वापरून, नेस्टेड घटक अक्षाच्या बाजूने हलवले जातात. एक्स(क्षैतिज अक्ष) आणि Y अक्ष (अनुलंब अक्ष). प्रत्येक घटकाला भिन्न ॲनिमेशन विलंब होता, 1 सेकंद ते 1.8 सेकंदांपर्यंत. प्रत्येक घटक ॲनिमेशनमध्ये खालील पॅरामीटर्स असतात:
- ॲनिमेशन नाव-वर
- ॲनिमेशन कालावधी- 1 सेकंद.
- गती वक्र- रेखीय (संपूर्ण ॲनिमेशनमध्ये समान गती).
- ॲनिमेशन विलंब- 1 सेकंद ते 1.8 सेकंद.
- चक्रांची संख्या- अनंत (अनंत).
चला लायब्ररीतील एक साधे ॲनिमेशन पाहू जे घटकाची पारदर्शकता बदलते:
@keyframes fadeIn ( ( /* ॲनिमेशन सायकलची सुरुवात (0% प्रमाणे) */ अपारदर्शकता : 0 ; /* घटक पूर्णपणे पारदर्शक आहे */ ) ते (/* ॲनिमेशन सायकलचा शेवट (100% प्रमाणे) * / अपारदर्शकता : 1 ; /* घटक अपारदर्शक आहे */ ) .fadeIn ( animation-name : fadeIn ; /* animation name (@keyframes नियमातील नावाशी संबंधित आहे) */ )हे कीफ्रेम एखाद्या घटकाची पारदर्शकता पूर्णपणे पारदर्शक ते अपारदर्शक करण्यासाठी गुणधर्म वापरतात.
परंतु तुम्हाला स्वारस्य असलेल्या Animate.css लायब्ररीचे ॲनिमेशन लॉन्च करण्यासाठी हे अद्याप पुरेसे नाही. ॲनिमेशन सुरू करण्यासाठी, तुम्ही प्रकल्पाच्या लेखकाने तयार केलेले खालील वर्ग वापरू शकता, परंतु आवश्यक नाही:
/* बेस क्लास जो तुम्हाला एका चक्रासाठी ॲनिमेशन चालवण्याची परवानगी देतो */ .ॲनिमेटेड ( ॲनिमेशन-कालावधी: 1s; /* ॲनिमेशन कालावधी 1 सेकंद */ ॲनिमेशन-फिल-मोड: दोन्ही; /* घटकासाठी शैली सेट करते जेव्हा ॲनिमेशन प्ले होत नाही (एकदा ॲनिमेशन पूर्ण झाल्यानंतर आणि ते सुरू होण्यापूर्वी - विलंब दरम्यान).*/ ) /* वर्ग .अनंत हा वर्ग .ॲनिमेटेड सेट असलेल्या घटकामध्ये जोडणे ॲनिमेशनला अनिश्चित काळासाठी प्ले करण्यास अनुमती देईल */ .animated.infinite ( ॲनिमेशन-पुनरावृत्ती-गणना : अनंत ; /* ॲनिमेशन अविरतपणे प्ले होईल */ )कृपया लक्षात घ्या की तुम्ही तुमचे स्वतःचे वर्ग तयार करू शकता जे ॲनिमेशन प्रक्रिया नियंत्रित करतील. नियमानुसार, या किंवा त्या घटकामध्ये वर्ग जोडणे भाषा वापरून होते JavaScriptवापरकर्त्याच्या क्रिया किंवा काही घटनांवर अवलंबून. आम्ही एक उदाहरण पाहू ज्यामध्ये आम्ही फक्त Animate.css लायब्ररीतील वर्ग वापरू आणि कॅस्केडिंग शैली पत्रके वापरून ॲनिमेशन स्थापित करू.
चला एक उदाहरण पाहू:
Animate.CSS लायब्ररी वापरून ॲनिमेशनया उदाहरणात, आम्ही Animate.css लायब्ररीला टॅग वापरून कनेक्ट केले आणि लायब्ररीतील खालील 3 वर्ग आम्ही कनेक्ट केलेल्या (स्पेसद्वारे विभक्त केलेली) प्रतिमा ठेवली.
गेल्या काही वर्षांमध्ये, CSS ने अनेक मनोरंजक वैशिष्ट्ये सादर केली आहेत जी वेब डेव्हलपमेंटला अधिक मनोरंजक बनवतात. यापैकी एक गोष्ट म्हणजे CSS3 ॲनिमेशन. CSS3 पूर्वी, ॲनिमेशन फक्त Javascript वापरून लागू केले जाऊ शकते.
आज आम्ही तुम्हाला अशा CSS3 लायब्ररीसह कसे कार्य करायचे ते दाखवू जे ॲनिमेशन तयार करण्याला आनंददायी आणि सोप्या प्रक्रियेत बदलेल: Animate.css.
Animate.css ही CSS3 वापरून ॲनिमेशन तयार करण्यासाठी लायब्ररी आहे. ही लायब्ररी 50 पेक्षा जास्त भिन्न ॲनिमेशन प्रभावांना समर्थन देते, जे जवळजवळ सर्वच वेगवेगळ्या ब्राउझरमध्ये काम करतात, CSS3 द्वारे समर्थित.
हे प्रभाव मजकूर, प्रतिमा, आकार इत्यादींवर लागू केले जाऊ शकतात.
चला सुरुवात करूयाAnimate.css सक्रिय करण्यासाठी, आवश्यक वर्गांना पृष्ठ घटकाशी कनेक्ट करा. प्रारंभ करण्यासाठी, हेड विभागात animate.css फाइल समाविष्ट करा. तुम्ही Github वर रेपॉजिटरीमधून लायब्ररी डाउनलोड करू शकता.
डीफॉल्टनुसार, पृष्ठ लोड झाल्यावर Animate.css एकदा ॲनिमेशन प्ले करते. ॲनिमेशन चक्रीयपणे प्ले करण्यासाठी, थोडी Javascript जोडूया.
... ...
HTMLसर्वप्रथम, आवश्यक घटकआम्हाला class.animated असाइन करणे आवश्यक आहे, त्यानंतर ॲनिमेशन प्रकार वर्ग.
हा मजकूर ॲनिमेट होईल.
बस्स! आता पेज लोड झाल्यावर ॲनिमेशन प्ले होईल. इव्हेंट सुरू झाल्यावर ॲनिमेशन प्ले करण्यासाठी Javascript जोडू या. The.option हा वर्ग पूर्णपणे अनियंत्रित आहे, तुम्ही तुमच्या अनुरूप बदल करू शकता.
अतिरिक्त CSS सेटिंग्जॲनिमेशन थांबू नये किंवा त्याची अंमलबजावणी करण्याची वेळ वेगळी असावी असे आपल्याला वाटत असेल तर आपल्याला काही मूल्ये समायोजित करावी लागतील.
ॲनिमेशन nth किंवा अनंत वेळा स्क्रोल करण्यासाठी, आम्ही ॲनिमेशन-पुनरावृत्ती-गणना विशेषता समायोजित करू शकतो. वेबकिट, मोझ इ. साठी ब्राउझर उपसर्ग निर्दिष्ट करण्यास विसरू नका. अनंत स्क्रोलिंगसाठी, मूल्य अनंत वर सेट करा.
आम्हाला ठराविक वेळा ॲनिमेशन प्ले करायचे असल्यास, तुम्ही ते असे फॉलो करू शकता.
विक्रेता-ॲनिमेशन-पुनरावृत्ती-गणना: अनंत | ;
प्लेबॅक वेळ बदलण्यासाठी, तुम्ही ॲनिमेशन-कालावधी आणि ॲनिमेशन-विलंब गुणधर्म समायोजित करू शकता. उदाहरण:
पर्याय ( -वेबकिट-ॲनिमेशन-कालावधी: 3s; -वेबकिट-ॲनिमेशन-विलंब: 2s; -वेबकिट-ॲनिमेशन-पुनरावृत्ती-गणना: 5; )
जावास्क्रिप्टकाही इव्हेंट दरम्यान ॲनिमेट करण्यासाठी (उदाहरणार्थ, क्लिक केल्यावर), आम्ही Javascript वापरू. प्रथम, एक लिंक जोडूया.
हा मजकूर ॲनिमेट होईल. ॲनिमेट करण्यासाठी क्लिक करा!
जावास्क्रिप्टचा वापर करून, आपण एक ॲनिमेट फंक्शन तयार करू शकतो, ज्याला आपण ॲनिमेशन क्लासचे नाव पास करू:
$(function() ( $("#ref").क्लिक(function() ( animate(".demo", "bounce"); return false; )); ));
हे संयोजन वापरण्याचे सर्वात सोपे उदाहरण या पृष्ठावर खाली पाहिले जाऊ शकते. सर्वात मनोरंजक गोष्ट अशी आहे की हे सौंदर्य (स्क्रोलिंग ॲनिमेशन) jQuery शिवाय कार्य करते. असे दिसून आले की या स्क्रिप्टसाठी सर्व दरवाजे खुले आहेत...आणि उदाहरण म्हणून, खाली स्क्रोल करा...धाडक व्हा...
मी तुम्हाला विश्वासाने सांगू शकतो की आता स्क्रोलिंग ॲनिमेशन खूप लोकप्रिय होत आहे, आणि हा प्रभाववेबसाइट विक्रीवर तुम्ही अनेकदा यशस्वी इंटरनेट उद्योजकांना भेटू शकता. अशा "युक्त्या" साइट्सला खूप जिवंत करतात आणि अभ्यागतांचे लक्ष त्यांवर केंद्रित करण्यात मदत करतात महत्वाचे मुद्दे, जे तुम्हाला प्रथम लक्षात घ्यायचे आहे.
स्क्रोलिंग ॲनिमेशन: संयोजन"WOW.js" आणि "Animate.css"
WordPress वर...
* ॲनिमेशनची पुनरावृत्ती करण्यासाठी, पृष्ठ रीलोड करा.
ते कसे सेट करावे?पायरी 1
प्रारंभ करण्यासाठी, या दोन फाइल डाउनलोड करा (“WOW.js” आणि “Animate.css”)
अद्यतनित (जुलै 25, 2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2
पायरी 2
साइटच्या रूट फोल्डरमध्ये “wow-animation” फोल्डर ठेवा. अर्थात, जोपर्यंत तुम्ही फाइल्सचा योग्य मार्ग निर्दिष्ट करता तोपर्यंत तुम्ही ते कुठेही ठेवू शकता. तरीही हे फोल्डर रूट फोल्डरमध्ये ठेवण्याचा सल्ला दिला जातो: index.html. जर ते वर्डप्रेस असेल, तर तुम्हाला हवे तेथे फोल्डर ठेवा. (मुख्य गोष्ट म्हणजे त्यासाठी योग्य मार्ग सूचित करणे).
पायरी 3
आम्ही या ओळीत ठेवले:
* साहजिकच, आम्ही फाइलचा योग्य मार्ग सूचित करतो. आपण वर्डप्रेसवर स्थापित केल्यास, मी संपूर्ण मार्ग निर्दिष्ट करण्याची शिफारस करतो, म्हणजे. httpS://YourDomain इ. ने सुरू तुम्ही फाइल योग्यरित्या जोडली आहे की नाही हे तपासण्यासाठी, URL कॉपी करा, ॲड्रेस बारमध्ये एंटर करा आणि एंटर दाबा. जर समजण्यायोग्य कोड असलेली फाइल उघडली तर सर्वकाही ठीक आहे :)
पायरी 4
या ओळी पृष्ठाच्या अगदी तळाशी ठेवा:
* फाइलचा योग्य मार्ग देखील निर्दिष्ट करा आणि ब्राउझरमध्ये तपासा.
निश्चित माहितीपायरी 6
प्रगत सेटिंग्ज. वैशिष्ट्ये जोडणे:
data-wow-duration : ॲनिमेशनचा कालावधी बदला;
data-wow-delay : ॲनिमेशन सुरू होण्यापूर्वी विलंब;
data-wow-offset : ॲनिमेशन सुरू होण्यापूर्वीचे अंतर (ब्राउझर विंडोच्या तळाशी सापेक्ष);
डेटा-व्वा-पुनरावृत्ती : ॲनिमेशन "अनेक वेळा" पुन्हा करा.
| 18.02.2016
CSS3 उघडेल अमर्यादित शक्यता UI डिझायनर्ससाठी, आणि मुख्य फायदा असा आहे की जावास्क्रिप्टचा वापर न करता जवळजवळ कोणतीही कल्पना सहजपणे लागू केली जाऊ शकते आणि जिवंत केली जाऊ शकते.
हे आश्चर्यकारक आहे की साध्या गोष्टी एक सामान्य वेब पृष्ठ कसे जिवंत करू शकतात आणि वापरकर्त्यांसाठी ते अधिक प्रवेशयोग्य बनवू शकतात. आम्ही CSS3 संक्रमणांबद्दल बोलत आहोत, ज्याच्या सहाय्याने तुम्ही एखाद्या घटकाला बदलण्याची आणि शैली बदलण्याची परवानगी देऊ शकता, उदाहरणार्थ, होव्हरवर. खाली उपलब्ध CSS3 ॲनिमेशनची नऊ उदाहरणे तुम्हाला तुमच्या साइटवर प्रतिसाद देणारे वातावरण तयार करण्यात मदत करतील, तसेच सुधारणा करतील. सामान्य दृश्यपृष्ठे सुंदर गुळगुळीत संक्रमणांबद्दल धन्यवाद.
अधिक तपशीलवार माहितीसाठी, आपण फायलींसह संग्रहण डाउनलोड करू शकता.
सर्व प्रभाव संक्रमण गुणधर्म वापरून कार्य करतात. संक्रमण- "संक्रमण", "परिवर्तन") आणि स्यूडो-क्लास:होवर, जे घटकाची शैली निर्धारित करते जेव्हा माउस कर्सर त्यावर फिरतो (आमच्या ट्यूटोरियलमध्ये). आमच्या उदाहरणांसाठी, आम्ही 500x309 px div, #6d6d6d चा प्रारंभिक पार्श्वभूमी रंग आणि 0.3 सेकंदांचा संक्रमण कालावधी वापरला.
मुख्य भाग > div ( रुंदी: 500px; उंची: 309px; पार्श्वभूमी: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; संक्रमण: सर्व 0.3s सहज)
1. होवरवर रंग बदलाएके काळी, विशिष्ट RGB मूल्यांची गणिती गणना करून, अशा प्रभावाची अंमलबजावणी करणे खूप कष्टाचे काम होते. आता एक CSS शैली लिहिणे पुरेसे आहे ज्यामध्ये तुम्हाला सिलेक्टरमध्ये स्यूडो-क्लास:होव्हर करणे आवश्यक आहे आणि एक पार्श्वभूमी रंग सेट करा जो सहजतेने (0.3 सेकंदात) मूळ पार्श्वभूमी रंग बदलेल जेव्हा तुम्ही ब्लॉकवर फिरता:
रंग:होवर (पार्श्वभूमी:#53ea93;)
2. फ्रेमचे स्वरूपएक मनोरंजक आणि उल्लेखनीय परिवर्तन म्हणजे आतील फ्रेम जी तुम्ही माउस फिरवता तेव्हा सहजतेने दिसते. विविध बटणे सजवण्यासाठी योग्य. हा परिणाम साध्य करण्यासाठी, आम्ही इनसेट पॅरामीटरसह स्यूडो-क्लास:होव्हर आणि बॉक्स-शॅडो गुणधर्म वापरतो (घटकाच्या आत सावली सेट करतो). याव्यतिरिक्त, आपल्याला सावलीचा ताण (आमच्या बाबतीत ते 23px आहे) आणि त्याचा रंग सेट करणे आवश्यक आहे:
बॉर्डर:होव्हर (बॉक्स-शॅडो: इनसेट 0 0 0 23px #53ea93; )
3. स्विंगहे CSS ॲनिमेशन अपवाद आहे, कारण येथे संक्रमण गुणधर्म वापरलेले नाहीत. त्याऐवजी आम्ही वापरले:
- @keyframes हे फ्रेम-बाय-फ्रेम CSS ॲनिमेशन तयार करण्यासाठी मूलभूत निर्देश आहे, जे तुम्हाला तथाकथित करण्याची परवानगी देते. स्टोरीबोर्ड आणि ॲनिमेशनचे मुख्य मुद्यांची सूची म्हणून वर्णन करा;
- ॲनिमेशन आणि ॲनिमेशन-पुनरावृत्ती-गणना - ॲनिमेशन पॅरामीटर्स (कालावधी आणि गती) आणि चक्रांची संख्या (पुनरावृत्ती) सेट करण्यासाठी गुणधर्म. आमच्या बाबतीत, 1 पुन्हा करा.
ॲनिमेशन: स्विंग 0.6s सहज;
-वेबकिट-ऍनिमेशन-पुनरावृत्ती-गणना: 1;
ॲनिमेशन-पुनरावृत्ती-गणना: 1; ) 4. क्षीणन
फॅड इफेक्ट मूलत: घटकाच्या पारदर्शकतेमध्ये एक साधा बदल आहे. ॲनिमेशन दोन टप्प्यात तयार केले आहे: प्रथम तुम्हाला प्रारंभिक पारदर्शकता स्थिती 1 वर सेट करणे आवश्यक आहे - म्हणजेच संपूर्ण अपारदर्शकता, आणि नंतर माउस फिरवताना त्याचे मूल्य निर्दिष्ट करा - 0.6:फेड (अपारदर्शकता: 1; ) .फेड:होवर (अपारदर्शकता: 0.6; )
उलट परिणामासाठी, मूल्ये स्वॅप करा:
5. मॅग्निफिकेशनवर फिरवल्यावर ब्लॉक मोठा करण्यासाठी, आम्ही ट्रान्सफॉर्म गुणधर्म वापरू आणि ते स्केल (1.2) वर सेट करू. या प्रकरणात, त्याचे प्रमाण राखून ब्लॉक 20 टक्क्यांनी वाढेल:
ग्रो:होव्हर ( -वेबकिट-ट्रान्सफॉर्म: स्केल(1.2); -एमएस-ट्रान्सफॉर्म: स्केल(1.2); ट्रान्सफॉर्म: स्केल(1.2); )
6. कपातएखादे घटक लहान करणे ते मोठे करणे तितकेच सोपे आहे. जर पाचव्या परिच्छेदात स्केल वाढवण्यासाठी आम्हाला 1 पेक्षा मोठे मूल्य निर्दिष्ट करणे आवश्यक आहे, तर ब्लॉक कमी करण्यासाठी आम्ही फक्त एक मूल्य निर्दिष्ट करू जे एकापेक्षा कमी असेल, उदाहरणार्थ, स्केल(0.7) . आता, माउस फिरवताना, ब्लॉक त्याच्या मूळ आकाराच्या 30 टक्के कमी होईल: संकुचित करा: होवर ( -वेबकिट-ट्रान्सफॉर्म: स्केल(०.७); -एमएस-ट्रान्सफॉर्म: स्केल(०.७); ट्रान्सफॉर्म: स्केल(०.७);), जे फिरवल्यावर वर्तुळात रूपांतरित होते. CSS सीमा-त्रिज्या गुणधर्म वापरून, :hover आणि transition च्या संयोगाने वापरला जातो, हे कोणत्याही समस्यांशिवाय साध्य करता येते:
वर्तुळ:होवर (सीमा-त्रिज्या: 70%;)
8. रोटेशनएक मजेदार ॲनिमेशन पर्याय म्हणजे घटक एका विशिष्ट संख्येने फिरवणे. हे करण्यासाठी, आम्हाला पुन्हा ट्रान्सफॉर्म प्रॉपर्टीची आवश्यकता असेल, परंतु वेगळ्या मूल्यासह - rotateZ(20deg) . या पॅरामीटर्ससह, ब्लॉक Z अक्षाच्या सापेक्ष 20 अंश घड्याळाच्या दिशेने फिरवला जाईल:
रोटेट:होव्हर ( -वेबकिट-ट्रान्सफॉर्म: रोटेटझेड(20 डिग्री); -एमएस-ट्रान्सफॉर्म: रोटेटझेड(20 डिग्री); ट्रान्सफॉर्म: रोटेटझेड(20 डिग्री);)
9. 3D सावलीफ्लॅट डिझाइनमध्ये हा प्रभाव योग्य आहे की नाही यावर डिझाइनरची मते भिन्न आहेत. तथापि, हे CSS3 ॲनिमेशन अगदी मूळ आहे आणि वेब पृष्ठांवर देखील वापरले जाते. आम्ही आधीपासूनच परिचित बॉक्स-शॅडो गुणधर्म वापरून त्रि-आयामी प्रभाव प्राप्त करू (मल्टी-लेयर शॅडो तयार करू) आणि translateX(-7px) पॅरामीटरसह बदलू (7 पिक्सेलने डावीकडे ब्लॉकचे आडवे शिफ्ट सुनिश्चित करू. ):
थ्रीड:होवर (बॉक्स-शॅडो: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #3px #3bea93-5393; रूपांतर: translateX( -7px);
ब्राउझर समर्थनखालील ब्राउझर सध्या संक्रमण गुणधर्मास समर्थन देतात:
| इंटरनेट एक्सप्लोरर | IE 10 आणि वरील द्वारे समर्थित |
| क्रोम | आवृत्ती 26 पासून समर्थित (आवृत्ती 25 पर्यंत -webkit- उपसर्गासह कार्य करत नाही) |
| फायरफॉक्स | आवृत्ती 16 वरून समर्थित (आवृत्त्या 4-15 मध्ये ते -moz- उपसर्गासह कार्य करते) |
| ऑपेरा | आवृत्ती १२.१ वरून समर्थित |
| सफारी | आवृत्ती 6.1 वरून समर्थित (आवृत्त्या 3.1-6 मध्ये ते -webkit- उपसर्ग सह कार्य करते) |
या उदाहरणांमध्ये वापरलेले उर्वरित गुणधर्म, जसे की transform , box-shadow , इत्यादी, जवळजवळ सर्व आधुनिक ब्राउझरद्वारे समर्थित आहेत. तथापि, जर तुम्ही या कल्पना तुमच्या प्रकल्पांसाठी वापरणार असाल, तर आम्ही जोरदार शिफारस करतो की तुम्ही क्रॉस-ब्राउझर सुसंगतता दोनदा तपासा.
आम्हाला आशा आहे की तुम्हाला ही CSS3 ॲनिमेशन उदाहरणे उपयुक्त वाटली आहेत. आम्ही तुम्हाला सर्जनशील यश इच्छितो!
