ఈ వ్యాసం అందిస్తుంది:
- విధానం 1: CSS యానిమేషన్ ప్రాపర్టీని ఉపయోగించి ఫేడ్-ఇన్ ఎఫెక్ట్
- విధానం 2: CSS ట్రాన్సిషన్ ప్రాపర్టీని ఉపయోగించి ఫేడ్-ఇన్ ఎఫెక్ట్
విధానం 1: CSS “యానిమేషన్” ప్రాపర్టీని ఉపయోగించి ఫేడ్-ఇన్ ఎఫెక్ట్
సరళమైన HTML పేజీని రూపొందించడానికి, దానిపై క్రింది మూలకాన్ని జోడించండి:
- జోడించు ' 'మూలకంతో పాటు' శైలి ' గుణం. 'శైలి' లక్షణం మూలకం యొక్క స్టైలింగ్ లక్షణాలను కలిగి ఉంటుంది.
- వర్తించు ' రంగు ” మూలకం యొక్క వచన రంగును నిర్వచించడానికి శైలి లక్షణంలోని లక్షణం.
- ఆ తర్వాత, 'ని ఉపయోగించండి కొంత వచనాన్ని లేదా సాధారణ పేరాను జోడించడానికి మూలకం.
క్రింద HTML కోడ్ ఉంది:
< h2 శైలి = 'రంగు: rgb(84, 8, 191)' >
Linuxhint ట్యుటోరియల్ వెబ్‌సైట్
< / h2 >
< p > పేజీ లోడ్‌పై ఫేడ్-ఇన్ ప్రభావం < / p >
HTML పేజీ విజయవంతంగా సృష్టించబడింది:
CSS విభాగంలో, పేజీలో ఫేడ్-ఇన్ ప్రభావాన్ని వర్తింపజేయడానికి, “ యానిమేషన్ 'CSS ప్రాపర్టీ ఉపయోగించబడుతుంది' <బాడీ> HTML పేజీ యొక్క మూలకం.
శైలి 'శరీరం' మూలకం
శరీరం {యానిమేషన్: fadeInPage ఈజ్ 3s;
యానిమేషన్-పునరుక్తి-గణన: ఒకటి ;
}
“
” క్రింది CSS లక్షణాలతో వర్తించబడుతుంది:- ' యానిమేషన్ ” అనేది బహుళ విలువలను పేర్కొనడం ద్వారా యానిమేషన్‌ను సెట్ చేసే షార్ట్‌హ్యాండ్ ప్రాపర్టీ. ఇక్కడ, యానిమేషన్ పేరు, యానిమేషన్-టైమింగ్-ఫంక్షన్ మరియు యానిమేషన్-వ్యవధి నిర్వచించబడ్డాయి.
- ' యానిమేషన్-పునరుక్తి-గణన ” యానిమేషన్ ఎన్నిసార్లు పునరావృతం చేయాలో నిర్వచిస్తుంది.
'యానిమేషన్'పై '@keyframes' నియమాలను వర్తింపజేయండి
@keyframes fadeInPage {0 % {
అస్పష్టత: 0 ;
}
100 % {
అస్పష్టత: ఒకటి ;
}
}
నిర్వచించడానికి ' @కీఫ్రేమ్‌లు ”యానిమేషన్ నియమాలు, @keyframes కీవర్డ్ తర్వాత యానిమేషన్ పేరును పేర్కొనండి. యానిమేషన్ ప్రవర్తనను ఈ క్రింది విధంగా సవరించండి:
- వద్ద ' 0% 'యానిమేషన్, ది' అస్పష్టత ” ఆస్తికి విలువ 0 కేటాయించబడింది. యానిమేషన్ ప్రారంభమైనప్పుడు, చిత్రం పారదర్శకంగా ఉంటుంది.
- వద్ద ' 100% 'యానిమేషన్, అస్పష్టత సెట్ చేయబడింది' ఒకటి ”, ఇది ఘన రంగును సూచిస్తుంది.
అవుట్‌పుట్
పేజీ లోడ్‌పై ఫేడ్-ఇన్ ప్రభావాన్ని వర్తింపజేయడానికి రెండవ పద్ధతి వైపు ముందుకు వెళ్దాం.
విధానం 2: CSS 'ట్రాన్సిషన్' ప్రాపర్టీని ఉపయోగించి ఫేడ్-ఇన్ ఎఫెక్ట్
ఒక 'ని జోడించండి ఆన్‌లోడ్ 'లోపల' లక్షణం <బాడీ> ' మూలకం. ఈ ఈవెంట్ పేజీ లోడ్‌లో ట్రిగ్గర్ చేయబడింది. లోడ్ అయినప్పుడు, శరీర మూలకం యొక్క అస్పష్టత 'కి సెట్ చేయబడింది ఒకటి ”, ఇది ఘన రంగుకు సంబంధించినది:
< శరీరం ఆన్‌లోడ్ = 'document.body.style.opacity='1'' >ఈ ఉదాహరణలో, CSS ' పరివర్తన ఫేడ్-ఇన్ ప్రభావాన్ని జోడించడానికి ఆస్తి ఉపయోగించబడుతుంది:
శరీరం {అస్పష్టత: 0 ;
పరివర్తన: అస్పష్టత 6s;
}
పైన పేర్కొన్న లక్షణాల వివరణ క్రింది విధంగా ఉంది:
- ' అస్పష్టత ”ఆస్తి మూలకాల యొక్క పారదర్శకతను నిర్వచిస్తుంది.
- CSSని ఉపయోగించడం' పరివర్తన ”, నిర్దిష్ట సమయంలో ప్రాపర్టీల విలువలను క్రమంగా మార్చండి.
అవుట్‌పుట్
పేజీ లోడ్‌పై ఫేడ్-ఇన్ ప్రభావం కోసం CSSని ఉపయోగించే పద్ధతులను మేము మీకు నేర్పించాము.
ముగింపు
HTML మూలకాలపై ఫేడ్-ఇన్ ప్రభావాన్ని వర్తింపజేయడానికి అనేక CSS లక్షణాలు ఉపయోగించబడతాయి. మరింత ప్రత్యేకంగా, ' యానిమేషన్ ',' అస్పష్టత ', మరియు' పరివర్తన ” లక్షణాలు పేజీలు లేదా మూలకాలపై యానిమేటెడ్ ప్రభావాలను పేర్కొనడానికి ఉపయోగించవచ్చు. యానిమేషన్లు 'ని ఉపయోగించడం ద్వారా సర్దుబాటు చేయబడతాయి. @కీఫ్రేమ్ 'నియమాలు. ఈ కథనం CSSని ఉపయోగించి పేజీ లోడ్‌పై ఫేడ్-ఇన్ ప్రభావాన్ని జోడించే పద్ధతులను వివరించింది.