CSS offset প্রতিশব্দ

การรับรองและการใช้งาน

offset นิยายค่าตัวแปรใช้เพื่อทำแอนิเมชันตามเส้นทางขององค์ประกอบ มันเป็นรูปแบบย่อของตัวแปรด้านลง:

• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate

เกี่ยวกับการตั้งค่า offset อย่างเช่นเดียวกันกับวิธีต่างๆ ของค่าตัวแปร โปรดดูตัวอย่างที่ลงละเอียดด้านล่าง

ตัวอย่าง

ตัวอย่าง 1

ใช้ offset นิยายค่าตัวแปรสั้นสำหรับ <img> โครงการ offset-path, offset-distance และ offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ตัวอย่าง 2: offset-path และ offset-rotate

<img> ইলেক্ট্রনের offset นิยายค่าตัวแปร offset-path และ offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ตัวอย่าง 3: offset-path และ offset-distance

<img> ইলেক্ট্রনের offset offset-path และ offset-distance โครงการนิยายค่าตัวแปร:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ 4: offset-path, offset-distance, offset-rotate এবং offset-anchor

<img> ইলেক্ট্রনের 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%;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS গঠনশৈলী

offset: auto|value|initial|inherit;

গুণমূল্য

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই ব্যবস্থাটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটির জন্য

সংক্রান্ত পাতা

শিক্ষা:SVG পথ

শিক্ষা:CSS অ্যানিমেশন

উল্লেখ:CSS offset প্রতিশব্দ

উল্লেখ:CSS offset-anchor প্রতিশব্দ

উল্লেখ:CSS offset-distance প্রতিশব্দ

উল্লেখ:CSS offset-path প্রতিশব্দ

উল্লেখ:CSS offset-position প্রতিশব্দ

উল্লেখ:CSS offset-rotate প্রতিশব্দ