ఈ మాన్యువల్‌లో, ''తో divని చూపించే మరియు దాచే విధానాన్ని మేము నేర్చుకుంటాము. పరివర్తన 'CSS యొక్క ఆస్తి.
CSSలో పరివర్తనతో Divని ఎలా చూపించాలి మరియు దాచాలి?
CSS' పరివర్తన ” ఆస్తి నిర్దిష్ట వ్యవధి ఆధారంగా ఆస్తి విలువను మార్చడాన్ని సులభతరం చేస్తుంది. ఇది దాని స్థితిని బట్టి తేలియాడే లేదా క్రియాశీల మూలకం కావచ్చు. అంతేకాకుండా, HTMLలో divని చూపించడానికి మరియు దాచడానికి CSS యొక్క ట్రాన్సిషన్ ప్రాపర్టీ ఉపయోగించబడుతుంది.
ఇప్పుడు, ట్రాన్సిషన్ ప్రాపర్టీ యొక్క సింటాక్స్‌కి వెళ్దాం.
వాక్యనిర్మాణం
పరివర్తన ప్రభావాన్ని సృష్టించేటప్పుడు మీరు పేర్కొనవలసిన రెండు విషయాలు ఉన్నాయి:
ప్రాథమికంగా, ' పరివర్తన ” అనేది నాలుగు ఇతర లక్షణాలతో కూడిన సంక్షిప్తలిపి ఆస్తి, ఇవి క్రింద ఇవ్వబడ్డాయి:
పరివర్తన : పరివర్తన-ఆస్తి పరివర్తన-వ్యవధిపరివర్తన-సమయ-ఫంక్షన్ పరివర్తన-ఆలస్యం
పేర్కొన్న లక్షణాల వివరణ ఇక్కడ ఉంది:
- పరివర్తన-ఆస్తి: ఇది ఏదైనా CSS ప్రాపర్టీకి పరివర్తనను సెట్ చేయడానికి ఉపయోగించబడుతుంది. వెడల్పు, ఎత్తు, అస్పష్టత మరియు మరెన్నో వంటివి.
- పరివర్తన వ్యవధి: ఇది పరివర్తన వ్యవధిని పేర్కొనడానికి ఉపయోగించబడుతుంది.
- పరివర్తన-సమయ-ఫంక్షన్: ఇది పరివర్తన వేగాన్ని సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- పరివర్తన-ఆలస్యం: ఇది పరివర్తన ప్రారంభమయ్యే లేదా ఆలస్యం అయ్యే సమయాన్ని నిర్దేశిస్తుంది.
ఒక ఉదాహరణను తీసుకుందాం, దీనిలో మేము ''తో divని చూపుతాము మరియు దాచాము పరివర్తన 'CSS యొక్క ఆస్తి. ఈ ప్రయోజనం కోసం, ముందుగా, మేము 'ని సృష్టిస్తాము. div 'మరియు ఇన్పుట్ రకం' చెక్బాక్స్ ”.
దశ 1: డివిని సృష్టించండి మరియు స్టైల్ చేయండి
HTML
<కేంద్రం ><లేబుల్ > Div > <ఇన్పుట్ రకం = 'చెక్ బాక్స్' >
>
ఇకపై, మేము నేపథ్య-రంగు ప్రాపర్టీని ఉపయోగించి divని స్టైల్ చేస్తాము మరియు నేపథ్య రంగును “ rgb(238, 190, 118) ”. మేము div యొక్క ఎత్తును ఇలా సెట్ చేస్తాము ' 150px ” మరియు దాని చుట్టూ ఉన్న సరిహద్దును ఇలా సర్దుబాటు చేయండి 10px ',' శిఖరం ', మరియు' rgb(6, 56, 2) ”. చివరికి, మేము ఫాంట్-పరిమాణాన్ని '' 50px ”.
CSS
div {నేపథ్య రంగు : rgb ( 238 , 190 , 118 ) ;
ఎత్తు : 150px ;
సరిహద్దు : 10px శిఖరం rgb ( 6 , 56 , రెండు ) ;
ఫాంట్ పరిమాణం : 50px ;
}
పైన వివరించిన కోడ్ యొక్క అవుట్‌పుట్ క్రింద ఇవ్వబడింది. ఇక్కడ, div మరియు చెక్బాక్స్ విజయవంతంగా సృష్టించబడినట్లు మీరు చూడవచ్చు:
ఇప్పుడు, ట్రాన్సిషన్ ప్రాపర్టీని ఉపయోగించి మేము divని దాచి, చూపించే తదుపరి దశకు వెళ్లండి.
దశ 2: పరివర్తనతో ఒక Divని చూపండి మరియు దాచండి
దీన్ని చేయడానికి, మేము 'ని సెట్ చేయడం ద్వారా పరివర్తన ప్రభావాన్ని సెట్ చేస్తాము. అస్పష్టత ', దాని వ్యవధి' 2సె ', మరియు అస్పష్టత విలువ ' 0 ” మేము CSSలో సృష్టించిన div తరగతిలో:
పరివర్తన : అస్పష్టత 2సె ;అస్పష్టత : 0 ;
గమనిక: మేము బదిలీని వర్తింపజేస్తాము ' అస్పష్టత మూలకం యొక్క పారదర్శకతను సెట్ చేయడానికి ఆస్తి. ఇక్కడ, మేము దాని విలువను ఇలా పేర్కొంటాము ' 0 ”, అంటే పరివర్తన ప్రారంభమైనప్పుడు, div రెండు సెకన్ల పాటు దాచబడుతుంది.
పరివర్తన విలువలను సెట్ చేసిన తర్వాత, మేము ఉపయోగిస్తాము ' ఇన్పుట్ ” HTML ఫైల్‌లో సృష్టించబడిన ఇన్పుట్ రకాన్ని యాక్సెస్ చేయడానికి మరియు ఇన్పుట్ మూలకం యొక్క సూడో-క్లాస్‌ని సెట్ చేయడానికి “ : తనిఖీ చేయబడింది ”. అప్పుడు, మేము సృష్టించిన divని యాక్సెస్ చేస్తాము మరియు “ + ”చెక్‌బాక్స్‌ను divతో అనుబంధించడానికి ఆపరేటర్ ఉపయోగించబడుతుంది. అందువల్ల, చెక్‌బాక్స్‌పై ఆపరేషన్ చేసినప్పుడు, దాని వినియోగం divని ప్రభావితం చేస్తుంది. తరువాత, మేము అస్పష్టత విలువను '' గా సెట్ చేస్తాము 1 ”:
ఇన్పుట్ : తనిఖీ చేశారు + div {అస్పష్టత : 1
}
గమనిక: మేము అస్పష్టత విలువను ఇలా పేర్కొంటాము 1 ”, అంటే చెక్బాక్స్ గుర్తు పెట్టబడినప్పుడు, సృష్టించబడిన div చూపబడుతుంది. అంతేకాకుండా, divని దాచడానికి దాని గుర్తును తీసివేయండి
మీరు చూడగలిగినట్లుగా, '' ఉపయోగించి div చూపబడుతుంది మరియు దాచబడుతుంది. పరివర్తన 'ఆస్తి మరియు' : తనిఖీ చేయబడింది ”సూడో-క్లాస్ ఎలిమెంట్:
మేము CSSలో ట్రాన్సిషన్ ప్రాపర్టీతో డివిని దాచిపెట్టి, చూపించే పద్ధతిని వివరించాము.
ముగింపు
డివిని చూపించడానికి మరియు దాచడానికి, ' పరివర్తన 'ఆస్తి మరియు' : తనిఖీ చేయబడింది 'సూడో-క్లాస్ మూలకం div అస్పష్టత విలువను సెట్ చేసే విధంగా ఉపయోగించబడుతుంది' 0 ”, మరియు ఇన్: తనిఖీ చేయబడిన నకిలీ-తరగతి మూలకం, అస్పష్టతను “గా సెట్ చేయండి 1 ”. వినియోగదారు చెక్‌బాక్స్‌పై క్లిక్ చేసినప్పుడు, div ప్రదర్శించబడుతుంది మరియు అది అన్‌చెక్ అయినప్పుడు, div దాచబడుతుంది. ఈ మాన్యువల్‌లో, పరివర్తన ప్రాపర్టీని ఉపయోగించడం ద్వారా divని దాచిపెట్టే మరియు చూపించే పద్ధతిని మేము వివరించాము.