CSS3 अब - एनिमेशन, पारदर्शिता, और अधिक (भाग 2)

"CSS3 Now!" ( पहला लेख CSS संक्रमण है ) लेखों की श्रृंखला को जारी रखते हुए, मैं CSS3, विशेष रूप से @keyframe और चेतन का उपयोग करते हुए एनिमेशन के बारे में बात करना चाहूंगा। इसके अलावा, लेख में हम अस्पष्टता गुणों और आरजीबीए () रंग मॉडल, सीमा-त्रिज्या के क्रॉस-ब्राउज़र उपयोग, बॉक्स-छाया और ग्रेडिएंट पर स्पर्श करेंगे।

मुख्य-फ़्रेम

वर्तमान में, ऐसे एनीमेशन का समर्थन केवल WebKit- आधारित ब्राउज़रों में ही मौजूद है - क्रोम और सफारी। लेकिन विषय इतना दिलचस्प है कि यह विचार करने योग्य है - आखिरकार, भविष्य दूर नहीं है, और जल्द ही अन्य ब्राउज़र क्रोम के साथ पकड़ लेंगे।



CSS एनिमेशन बनाने में पहला बिंदु कीफ्रेम (कीफ्रेम) का निर्माण है। सामान्य तौर पर, एक कीफ़्रेम नियमों का एक समूह है, जिसे पूरे एनीमेशन में लागू किया जाएगा। आप फ़ंक्शंस के साथ कीफ्रेम की तुलना कर सकते हैं - पहले हम कीफ़्रेम घोषित करते हैं, और फिर सीएसएस में कहीं भी इस एनीमेशन को कॉल करते हैं।



चलो एक साधारण एनीमेशन का एक उदाहरण बनाते हैं - जब आप एक गेंद पर मँडराते हैं, तो यह कूदना शुरू हो जाता है।

गेंद:

#ball { width: 60px; height: 60px; border-radius: 30px; background: #f00; position: absolute; bottom: 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब keyframes बनाएँ:

 @-webkit-keyframes bounce { 0% { bottom: 0; } 50% { bottom: 100px; } 100% { bottom: 0; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पहले हम अपने एनीमेशन का नाम सेट करते हैं - उदाहरण में यह "बाउंस" होगा। फिर हम एनीमेशन के keyframes का वर्णन करते हैं:

0% { bottom: 0; }



0% { bottom: 0; }



- शुरुआत में, गेंद प्रारंभिक स्थिति पर है;

50% { bottom: 100px; }



50% { bottom: 100px; }



- एनीमेशन के बीच में, गेंद अपनी अधिकतम ऊंचाई तक पहुंचती है;

100% { bottom: 0; }



100% { bottom: 0; }



- एनीमेशन के अंत में, गेंद अपने मूल स्थान पर गिरती है।



एक एनीमेशन बनाएँ:

 #ball:hover { -webkit-animation: bounce 1s infinite ease; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जब आप गेंद पर होवर करते हैं, तो इस कोड के साथ, हम एनीमेशन सेट करते हैं। आदेश निम्नानुसार है: < keyframe> < > < > < >



।



हो गया ! हमारी गेंद बंन की तरह उछल रही है! अब इस उदाहरण को देखें । बॉक्स-शैडो और कीफ्रेम का संयोजन हमें जोर देने के लिए एक अद्भुत आकार देता है। इसका उपयोग किया जा सकता है, उदाहरण के लिए, जब गलत क्षेत्रों को उजागर करने के लिए रूपों की जांच की जाती है।

पल्स आकार कोड:

 @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } 50% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9); } 100% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } } form input[type="text"]:focus { -webkit-animation: pulse 1.5s infinite ease-in-out; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कोड में वादा किया गया rgba () दिखाई दे रहा है। जैसा कि कई लोग पहले ही महसूस कर चुके हैं, यह आरजीबी कलर मॉडल + अल्फा चैनल है, जो हमें ट्रांसलेंसी को सेट करने की अनुमति देता है जहां इसकी आवश्यकता होती है।

अस्पष्टता

लेकिन यह संपत्ति पहले से ही पूर्ण रूप से उपयोग की जा सकती है - यह हमारे प्रिय को छोड़कर सभी ब्राउज़रों में काम करती है। सच है, IE के लिए निम्नलिखित तय है:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);





यहाँ पारभासी क्रॉस-ब्राउज़र बटन का एक उदाहरण दिया गया है:

 .foo { opacity: 0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

उन लोगों के लिए जो अभी तक नहीं जानते हैं - एक अद्भुत CSS3Pie चीज है - यह हमें गोल कोनों, छाया और ग्रेडिएंट का उपयोग करने की अनुमति देता है अभी और बिल्कुल क्रॉस-ब्राउज़र: IE 6-8, क्रोम, सफारी, मोज़िला, ओपेरा! इन सभी गुणों के क्रॉस-ब्राउज़र उपयोग का एक उदाहरण:

 border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -moz-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/PIE.htc);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

परीक्षण पृष्ठ: गेंद , आकार , क्रॉस-ब्राउज़र गुण ।



आपके ध्यान के लिए धन्यवाद और अपने लेआउट का आनंद लें!