हम कार्य के उदाहरण का उपयोग करते हुए एम इकाइयों के संचालन के सिद्धांत का अध्ययन करते हैं "एक लचीला प्रीलोडर का लेआउट"

मुझे विभिन्न इंटरफ़ेस तत्वों के साथ आना पसंद है, और एक बार मैं एक प्रीलोडर बनाना चाहता था।

इसे लागू करने के लिए, मुझे निम्नलिखित मार्कअप की आवश्यकता है:

<div class="preloader"></div> 

मेरे विचार के अनुसार, प्रीलोडर में दो वर्ग होते हैं: 60x60px के आकार वाला एक बड़ा और एक छोटा - 15x15px।

चूंकि एक बड़ा वर्ग एक छोटी के लिए एक रूपरेखा है, मैंने इसे लागू करने के लिए div .prealoder तत्व का उपयोग किया। लेकिन एक नेस्टेड वर्ग के लिए, मुझे पहले एक छद्म तत्व की आवश्यकता थी।

 .preloader { width: 60px; height: 60px; border: 2px solid #fff; position: relative; } .preloader::before { content: ""; width: 15px; height: 15px; background-color: #fff; position: absolute; top: calc(50% - 7.5px); left: calc(50% - 7.5px); } 

एनीमेशन के लिए, मैंने निम्नलिखित स्क्रिप्ट लिखी है:

 .preloader::before { animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } } 

मुख्य प्रदर्शन के अलावा, मैं समोच्च 120x120px और आंतरिक वर्ग 30x30px के आयामों के साथ एक प्रीलोडर जोड़ना चाहता था।

 .preloader_l { width: 120px; height: 120px; } .preloader_l::before { width: 30px; height: 30px; top: calc(50% - 15px); left: calc(50% - 15px); animation-name: preloader-l; } @keyframes preloader-l { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-30px, -30px, 0) scale(1); } 40% { transform: translate3d(30px, -30px, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1); } 60% { transform: translate3d(-30px, 30px, 0) scale(1); } } 

सब कुछ योजना के अनुसार निकला। मैं चाय पीने गया, और मेरे पास यह विचार आया कि अगर मुझे दूसरा आकार जोड़ने की आवश्यकता है, तो फिर से मुझे आयाम (चौड़ाई और ऊंचाई), स्थिति (शीर्ष और बाएं) और एनीमेशन स्क्रिप्ट को इंगित करना होगा।

इसे ठीक करने के लिए, मैं माप की इकाई का उपयोग करूंगा। इसके साथ, मैं सभी प्रॉपर्टी वैल्यू को एक ही फॉन्ट-साइज़ वैल्यू पर बाँधने में सक्षम हो जाऊँगा, जिसके साथ मैं प्री-लोडर के आयामों को बदलूँगा।

परिणामस्वरूप, कोड निम्नानुसार बदल जाएगा:

 /*  Xem  Xpx     em   px. */ .preloader { width: Xem; height: Xem; font-size: Xpx; } .preloader::before { width: Xem; height: Xem; animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-Xem, -Xem, 0) scale(1); } 40% { transform: translate3d(Xem, -Xem, 0) scale(1); } 50% { transform: translate3d(Xem, Xem, 0) scale(1); } 60% { transform: translate3d(-Xem, Xem, 0) scale(1); } } .preloader_l { font-size: Xpx; } 

निर्णय

समस्या को हल करने के लिए, ई गणना गणना सूत्र मेरे लिए उपयोगी है:

 Vem = Vpx / Fs 

Vpx उस px में मान है जो पहले सेट किया गया था। Fs मान एक मिलान संख्या है जिसके द्वारा Vpx मान को विभाजित करना सुविधाजनक है।

अब आप निम्नलिखित गुणों की गणना शुरू कर सकते हैं:

 .preloader { width: 60px; height: 60px; } .preloader::before { width: 15px; height: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); } 

ऐसा करने के लिए, फ़ॉन्ट-आकार मान का चयन करें। मेरे विचार के अनुसार, यह संपत्ति रूपरेखा के आयाम निर्धारित करेगी, इसलिए यह उसी मूल्य का उपयोग करने के लिए तर्कसंगत है जो अब चौड़ाई और ऊंचाई के लिए निर्धारित है।

 Width(em) = 60px / 60px = 1em Height(em) = 60px / 60px = 1em 

 .preloader { width: 1em; height: 1em; font-size: 60px; } 

अगला, मैं तत्व से पहले।। लोडर की चौड़ाई, ऊंचाई, शीर्ष और बाएँ मानों की गणना करूँगा। ऐसा करने के लिए, आपको फ़ॉन्ट-आकार मान का चयन करने की आवश्यकता नहीं है, क्योंकि यह .preloader तत्व के फ़ॉन्ट-आकार से विरासत में मिलेगा।

 Width(em) = 15px / 60px = 0.25em Height(em) = 15px / 60px = 0.25em Top(em) = 7.5px / 60px = 0.125em; Left(em) = 7.5px / 60px = 0.125em; 

 .preloader::before { width: 0.25em; height: 0.25em; top: calc(50% - 0.125em); left: calc(50% - 0.125em); } 

यह एनीमेशन स्क्रिप्ट में मूल्यों को बदलने के लिए बना हुआ है।

 @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } } 

यदि आप साइन की परवाह किए बिना मूल्यों को देखते हैं, तो आपको केवल 15px का अनुवाद करने की आवश्यकता है। मैंने पहले भी ऐसा किया है और वे 0.25em के अनुरूप हैं।

 @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-0.25em, -0.25em, 0) scale(1); } 40% { transform: translate3d(0.25em, -0.25em, 0) scale(1); } 50% { transform: translate3d(0.25em, 0.25em, 0) scale(1); } 60% { transform: translate3d(-0.25em, 0.25em, 0) scale(1); } } 

अब आप .preloader_l तत्व के लिए आकार को 120px पर सेट कर सकते हैं।

 .preloader_l { font-size: 120px; } 

यह ध्यान देने योग्य है कि मैंने CSS नियम .preloader_l :: से पहले और एनीमेशन स्क्रिप्ट प्रीलोडर- l को हटा दिया क्योंकि उन्हें अब आवश्यकता नहीं है।

होम कार्य

इस चाल को मजबूत करने के लिए, मैंने एक कार्य तैयार किया। इसमें px से लेकर em तक के मानों का अनुवाद करना आवश्यक है, जिनका उपयोग एनीमेशन स्क्रिप्ट में किया जाता है। पहले से गणना की गई सभी संपत्ति मूल्य संरक्षित हैं।

 @keyframes preloader { 0%, 70%, 100% { transform: translate3d(0, 0, 0) scale(0); } 10%, 60% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(9px, -21px, 0) scale(1); } 30% { transform: translate3d(3px, 21px, 0) scale(1); } 40% { transform: translate3d(-9px, -21px, 0) scale(1); } 50% { transform: translate3d(-9px, 21px, 0) scale(1); } }