CSS ఆఫ్సెట్ అట్రిబ్యూట్
- ముందు పేజీ object-position
- తరువాత పేజీ offset-anchor
నిర్వచనం మరియు ఉపయోగం
offset అంశాలు పాథం పైన అనిమేషన్ చేయడానికి ఉపయోగించబడుతుంది, ఇది క్రింది అంశాల సరళీకరణ రూపం ప్రదర్శిస్తుంది:
అమర్పు గురించి offset అంశాల వినియోగించు పరిమాణాల వివిధ రీతులను మరింత ఉదాహరణలకు చూడండి.
ప్రకటన
ఉదాహరణ 1
ఉపయోగించండి offset సరళమైన అంశాలు <img> మెటీరియల్ కు ఆఫ్సెట్-పాథ్, ఆఫ్సెట్-డిస్టెన్స్ మరియు ఆఫ్సెట్-రోటేట్ వినియోగించు పరిమాణాలు అమర్పు చేయడానికి ఉపయోగించబడతాయి:
img {
ఆఫ్సెట్: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
ఉదాహరణ 2: ఆఫ్సెట్-పాథ్ మరియు ఆఫ్సెట్-రోటేట్
ఐమ్జ్ ఎలమెంట్ యొక్క ఉపయోగం ద్వారా offset అంశాల అమర్పు ఆఫ్సెట్-పాథ్ మరియు ఆఫ్సెట్-రోటేట్ వినియోగించు పరిమాణాలు:
img {
ఆఫ్సెట్: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
ఉదాహరణ 3: ఆఫ్సెట్-పాథ్ మరియు ఆఫ్సెట్-డిస్టెన్స్
ఐమ్జ్ ఎలమెంట్ యొక్క ఉపయోగం ద్వారా offset అంశాల అమర్పు ఆఫ్సెట్-పాథ్ మరియు ఆఫ్సెట్-డిస్టెన్స్ వినియోగించు పరిమాణాలు:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
ఉదాహరణ 4: offset-path, offset-distance, offset-rotate మరియు offset-anchor
ఐమ్జ్ ఎలమెంట్ యొక్క ఉపయోగం ద్వారా offset ఆపిట్రిబ్యూట్ విలువలు offset-path, offset-distance, offset-rotate మరియు offset-anchor యొక్క లక్షణాలు సూచిస్తుంది:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
సిఎస్ఎస్ సంకేతాలు
offset: auto|value|initial|inherit;
లక్షణాన్ని విలువ
| విలువ | వర్ణన |
|---|---|
| auto | డిఫాల్ట్. దయచేసి ప్రతి ఒక్క 'offset-' లక్షణం యొక్క డిఫాల్ట్ విలువను చూడండి. |
| offset-anchor | ఎలమెంట్ పై అనిమేషన్ పాత్రలో గానీ స్థిరంగా ఉండే పాయింట్ ను నిర్దేశిస్తుంది. డిఫాల్ట్ విలువ ఆటో ఉంటుంది. |
| offset-distance | offset-path నిర్దేశించిన మార్గం యొక్క ప్రారంభ స్థానాన్ని నిర్దేశిస్తుంది. డిఫాల్ట్ విలువ 0 ఉంటుంది. |
| offset-path | ఎలమెంట్ ను అనిమేషన్ చేయబడే మార్గాన్ని నిర్దేశిస్తుంది. డిఫాల్ట్ విలువ నాన్ ఉంటుంది. |
| offset-position | పాత్రను నిర్దేశించిన మార్గంలో ఎలమెంట్ యొక్క ప్రారంభ స్థానాన్ని నిర్దేశిస్తుంది. డిఫాల్ట్ విలువ నార్మల్ ఉంటుంది. |
| offset-rotate | పాత్రను నిర్దేశించిన మార్గంలో అనిమేషన్ చేయబడే ఎలమెంట్ యొక్క రోటేషన్ కోణాన్ని నిర్దేశిస్తుంది. డిఫాల్ట్ విలువ ఆటో ఉంటుంది. |
| initial | ఈ లక్షణాన్ని దిఫాల్ట్ విలువకు అమర్చండి. చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన ముందస్తు ఎలమెంట్ నుండి పారంపర్యం చేసుకుంది. చూడండి: inherit. |
సాంకేతిక వివరాలు
| డిఫాల్ట్ విలువ | వ్యక్తిగత లక్షణాల డిఫాల్ట్ విలువను చూడండి |
|---|---|
| పారంపర్యం సాధిస్తుంది: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు. దయచేసి ఈ కి సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| వెర్షన్: | సిఎస్ఎస్3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ని సూచిస్తాయి。
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
|---|---|---|---|---|
| 55 | 79 | 72 | 16 | 42 |
సంబంధిత పేజీలు
శిక్షణకు కొరకు:SVG పథం
శిక్షణకు కొరకు:CSS ఆనిమేషన్
పరిచయం కోసం:CSS ఆఫ్సెట్ అట్రిబ్యూట్
పరిచయం కోసం:CSS ఆఫ్సెట్-అంకర్ అట్రిబ్యూట్
పరిచయం కోసం:CSS ఆఫ్సెట్-డిస్టెన్స్ అట్రిబ్యూట్
పరిచయం కోసం:CSS ఆఫ్సెట్-పాథ్ అట్రిబ్యూట్
పరిచయం కోసం:CSS ఆఫ్సెట్-పోజిషన్ అట్రిబ్యూట్
పరిచయం కోసం:CSS ఆఫ్సెట్-రోటేషన్ అట్రిబ్యూట్
- ముందు పేజీ object-position
- తరువాత పేజీ offset-anchor
