ຖານະການ offset CSS

定义和用法

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 动画

参考：ຖານະການ offset CSS

参考：ຖານະການ offset-anchor CSS

参考：ຖານະການ offset-distance CSS

参考：ຖານະການ offset-path CSS

参考：ຖານະການ offset-position CSS

参考：ຖານະການ offset-rotate CSS