
- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内边距
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块级元素
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - 清除浮动
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 聚焦
- CSS - 缩放
- CSS - 转换
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 覆盖层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪裁
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - 全部
- CSS - 内嵌
- CSS - 隔离
- CSS - 滚动溢出
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - 指针事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - 偏移量
- CSS - Accent Color
- CSS - User Select
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 图层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - Important
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - 盒装饰中断
- CSS - Caret Color
- CSS - 文本阴影
- CSS - 文本
- CSS - 2d 变换
- CSS - 3d 变换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 样式图片
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS RWD - 简介
- CSS RWD - 视口
- CSS RWD - 网格视图
- CSS RWD - 媒体查询
- CSS RWD - 图片
- CSS RWD - 视频
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS - offset-anchor 属性
CSS 属性 offset-anchor 指定元素框内充当偏移路径 (offset-path) 移动的参考点的点。
元素的动画行为由此属性控制,这对于定义元素的哪个部分沿着 offset-path 指定的路径移动至关重要。
可能的值
auto - offset-anchor 属性使元素沿偏移路径移动。
它通常与 transform-origin 匹配,除非 offset-path 为 none,在这种情况下,它与 offset-position 对齐。
<position> - <position> 定义 x/y 坐标,使用一到四个值定义,相对于元素的框边框。
请注意,只有 background-position 可以使用三值语法。
应用于
可转换元素
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
语法
offset-anchor = auto | <position>
CSS offset-anchor - 基本示例
以下示例演示了 offset-anchor 属性的使用。
<html> <head> <style> div { offset-path: path("M 0,40 L 300,40"); animation: move 4000ms infinite alternate ease-in-out; width: 80px; height: 80px; border-radius: 10%; } section { background-image: linear-gradient( to bottom, transparent, transparent 49%, #4CAF50 50%, #4CAF50 51%, transparent 52% ); border: 2px solid #4CAF50; margin-bottom: 60px; width: 700px; height: 60px; display: flex; justify-content: center; align-items: center; } .offset-anchor1 { offset-anchor: auto; background: #2196F3; } .offset-anchor2 { offset-anchor: bottom left; background: #FF9800; } .offset-anchor3 { offset-anchor: top right; background: #9C27B0; } @keyframes move { 0% { offset-distance: 50%; } 50% { offset-distance: 100%; } } </style> </head> <body> <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> </body> </html>
CSS offset-anchor - 使用不同的锚点值
以下示例演示了 offset-anchor 属性以及不同锚点值的使用。
<html> <head> <style> div { offset-path: path("M 0,60 Q 150,0 300,60"); animation: move 5000ms infinite alternate ease-in-out; width: 100px; height: 100px; border-radius: 50%; position: relative; background-color: #FF6347; } section { background-image: linear-gradient( to bottom, transparent, transparent 49%, #4682B4 50%, #4682B4 51%, transparent 52% ); border: 2px solid #4682B4; margin-bottom: 80px; width: 600px; height: 100px; display: flex; justify-content: center; align-items: center; } .offsetAnchorA { offset-anchor: auto; background: #32CD32; } .offsetAnchorB { offset-anchor: bottom right; background: #FFD700; } .offsetAnchorC { offset-anchor: top left; background: #9932CC; } @keyframes move { 0% { offset-distance: 10%; } 50% { offset-distance: 50%; } 100% { offset-distance: 90%; } } </style> </head> <body> <section> <div class="offsetAnchorA"></div> </section> <section> <div class="offsetAnchorB"></div> </section> <section> <div class="offsetAnchorC"></div> </section> </body> </html>
广告