Свойство CSS offset-anchor
Свойство offset-anchor определяет точку привязки блока вдоль пути смещения. Путь смещения считается либо геометрией базовой фигуры, которая не была стилизована, либо путем, состоящим из одного или нескольких подпутей. Точка привязки указывает точку блока, которая перемещается вдоль пути смещения.
WARNING
Это свойство смещения является экспериментальной технологией.
| Начальное значение | auto |
|---|---|
| Применяется к | Трансформируемым элементам. |
| Наследуется | Нет. |
| Анимируется | Да. |
| Версия | Motion Path Module Level 1 |
| Синтаксис DOM | object.style.offsetAnchor = "right top"; |
Синтаксис
Синтаксис CSS offset-anchor
css
offset-anchor: auto | <position>;Пример свойства offset-anchor:
Пример кода CSS offset-anchor
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
auto | Центр блока. |
<position> | <percentage> - Процентное значение для горизонтального смещения относительно ширины блока отступов. Процентное значение для вертикального смещения относительно высоты блока отступов. <length> - Значение длины задает смещение от верхнего левого угла блока отступов. |
initial | Заставляет свойство использовать значение по умолчанию. |
inherit | Наследует свойство от родительского элемента. |
Практика
Какова функциональность свойства offset-anchor в CSS согласно статье на w3docs.com?