设为首页收藏本站
开启辅助访问 切换到宽版 登录 立即注册 QQ登录

花潮论坛

搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 143|回复: 15

理解 offset-anchor 属性

[复制链接]
马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
    发表于 2026-8-9 12:22 | 显示全部楼层 |阅读模式

    请马上登录，朋友们都在花潮里等着你哦：）

    您需要 登录 才可以下载或查看，没有账号？立即注册

    x

    offset-anchor 演示

    0%

    center;











    评分

    参与人数 4威望 +140 金钱 +280 经验 +140 收起 理由
    杨帆 + 30 + 60 + 30 匠心独运，细节精致入微！
    霜染枫丹 + 30 + 60 + 30 创意十足，赞一个!
    红影 + 50 + 100 + 50 匠心独运，细节精致入微！
    梦江南 + 30 + 60 + 30 匠心独运，细节精致入微！

    查看全部评分

    回复

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-9 12:28 | 显示全部楼层
    offset-anchor 属性是 CSS Motion Path 模块的一部分，它用于指定一个元素在沿着路径（由 offset-path 定义）移动时，其自身的哪个点应该锚定在路径上。

    简单来说，当一个元素沿着一条路径（比如一个圆或一条自定义的 SVG 路径）移动时，你可能不希望元素的中心点始终位于路径上。offset-anchor 允许你选择元素内部的一个点（例如，左上角、右下角或自定义百分比位置）作为“锚”，让这个锚点紧贴着路径移动。
    回复 支持 反对

    使用道具 举报

    梦江南
  • TA的每日心情
    开心
    2026-9-12 10:10

    • 签到天数: 839 天

    [LV.10]以坛为家III

    610

    主题

    4万

    回帖

    10万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师天籁妙音共看流星风雨同行我心永远喜乐安康花潮贵宾
    发表于 2026-8-9 12:47 | 显示全部楼层
    理解 offset-anchor 属性，好好学习。
    回复 支持 反对

    使用道具 举报

    梦江南
  • TA的每日心情
    开心
    2026-9-12 10:10

    • 签到天数: 839 天

    [LV.10]以坛为家III

    610

    主题

    4万

    回帖

    10万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师天籁妙音共看流星风雨同行我心永远喜乐安康花潮贵宾
    发表于 2026-8-9 12:48 | 显示全部楼层
    谢谢黑黑辛苦，中午嚎！
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-12-1 20:32

    • 签到天数: 1052 天

    [LV.10]以坛为家III

    1899

    主题

    33万

    回帖

    41万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2026-8-9 14:40 | 显示全部楼层
    这个用图示的方式进行讲解，特别清晰，能亲眼看到 offset-anchor 属性对应的位置。
    谢谢黑黑的细致讲解
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-10 08:33 | 显示全部楼层
    梦江南 发表于 2026-8-9 12:47
    理解 offset-anchor 属性，好好学习。

    如果需要用到 offset-path 路径，这个 offset-anchor 属性有用
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-10 08:33 | 显示全部楼层
    梦江南 发表于 2026-8-9 12:48
    谢谢黑黑辛苦，中午嚎！

    你嚎你嚎
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-10 08:33 | 显示全部楼层
    红影 发表于 2026-8-9 14:40
    这个用图示的方式进行讲解，特别清晰，能亲眼看到 offset-anchor 属性对应的位置。
    谢谢黑黑的细致讲解{:4 ...

    回复 支持 反对

    使用道具 举报

    梦江南
  • TA的每日心情
    开心
    2026-9-12 10:10

    • 签到天数: 839 天

    [LV.10]以坛为家III

    610

    主题

    4万

    回帖

    10万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师天籁妙音共看流星风雨同行我心永远喜乐安康花潮贵宾
    发表于 2026-8-10 09:04 | 显示全部楼层
    马黑黑 发表于 2026-8-10 08:33
    如果需要用到 offset-path 路径，这个 offset-anchor 属性有用

    好，用时再好好研究。
    回复 支持 反对

    使用道具 举报

    梦江南
  • TA的每日心情
    开心
    2026-9-12 10:10

    • 签到天数: 839 天

    [LV.10]以坛为家III

    610

    主题

    4万

    回帖

    10万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师天籁妙音共看流星风雨同行我心永远喜乐安康花潮贵宾
    发表于 2026-8-10 09:05 | 显示全部楼层
    马黑黑 发表于 2026-8-10 08:33
    你嚎你嚎

    黑黑老师新周嚎！
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-10 19:14 | 显示全部楼层
    梦江南 发表于 2026-8-10 09:05
    黑黑老师新周嚎！

    新旧都嚎
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-10 19:15 | 显示全部楼层
    梦江南 发表于 2026-8-10 09:04
    好，用时再好好研究。

    回复 支持 反对

    使用道具 举报

    霜染枫丹
  • TA的每日心情
    开心
    2026-9-18 00:47

    • 签到天数: 249 天

    [LV.8]以坛为家I

    390

    主题

    4195

    回帖

    2万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪七彩绚丽金剪刀开朗大方花潮版主
    发表于 2026-8-10 20:48 | 显示全部楼层
    马老师晚上好~~

    我若用这个形式制作一个帖子，会命名为“不忘初心“，很漂亮，赞佩~~我先抱走了。
    感谢您的分享，夏祺！
    回复 支持 反对

    使用道具 举报

    杨帆
  • TA的每日心情
    奋斗
    2026-9-23 10:54

    • 签到天数: 666 天

    [LV.9]以坛为家II

    410

    主题

    5178

    回帖

    2万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生鹰傲苍穹飞龙在天王者至尊大将风范花潮版主
    发表于 2026-8-12 19:31 | 显示全部楼层
    很实用的知识点，谢谢马老师直观演示offset-anchor 属性
    ★青春是一个人的精神生命，奋斗是一个人最大的体面，学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-12 19:56 | 显示全部楼层
    杨帆 发表于 2026-8-12 19:31
    很实用的知识点，谢谢马老师直观演示offset-anchor 属性

    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    擦汗
    2026-9-18 07:54

    • 签到天数: 1921 天

    [LV.Master]伴坛终老

    3326

    主题

    13万

    回帖

    29万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2026-8-12 19:56 | 显示全部楼层
    霜染枫丹 发表于 2026-8-10 20:48
    马老师晚上好~~

    我若用这个形式制作一个帖子，会命名为“不忘初心“，很漂亮，赞佩~~我先抱走了。

    回复 支持 反对

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持：DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2026-9-23 23:26 , Processed in 0.161697 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表