CSS锚点定位实战-鼠标跟随交互效果

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11886
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、前言之锚点定位简介

锚点定位去年出来的时候就详细介绍过，参见“全新的CSS Anchor Positioning锚点定位API”，非常强大，非常实用。

能够解决overflow剪裁定位元素的问题，包含自动调整方向，尺寸自动适应等特性。

基本上任何浮层元素之间的定位都不再需要JavaScript代码的参与。

我看了下兼容性，所有现代浏览器目前均已支持。

不过，上述文章更多的理论知识介绍，下面展示下其一个比较基础，但又比较实用的小应用，列表类选项悬停或者选中的跟随动画效果。

二、案例1：选中态标识动效

直接先看效果，点击下面的单选框（点击文字也可以选中），就可以看到后面有个绿色的勾勾出现，切换的时候，就会动画效果移动过去。

博主的钓鱼抖音账号名称是：

最会钓鱼的程序员

张鑫旭本人

其他

相关的HTML和CSS代码如下所示：

<fieldset class="fieldset">
    <legend>博主的钓鱼抖音账号名称是：</legend>
    <p>
        <input type="radio" id="follow" name="follow" value="1">
        <label for="follow">最会钓鱼的程序员</label>
    </p>
    <p>
        <input type="radio" id="follow2" name="follow" value="2">
        <label for="follow2">张鑫旭本人</label>
    </p>
    <p>
        <input type="radio" id="follow3" name="follow" value="3">
        <label for="follow3">其他</label>
    </p>
</fieldset>

.fieldset::before {
    content: '✓';
    position: absolute;
    display: none;
    color: green;
    transition: 0.5s ease;
    position-anchor: --checked;
    top: anchor(center);
    left: calc(anchor(right) + 5px);
    translate: 0 -50%;
}
.fieldset:has(:checked)::before {
    display: block;
    animation: fade-in 0.2s ease-in-out;
}
.fieldset :checked + label {
    anchor-name: --checked;
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

实现原理说明

首先，使用伪元素创建绿色的勾勾，默认隐藏。

当有单选项选中的时候，显示，这里的显示还使用了淡出动画效果。

绿色的勾勾设置锚点定位，定位对象的名称就是--checked。

然后，只需要当单选项选中的时候，设置后面的<label>元素的锚点名称是--checked（anchor-name: --checked），这个勾勾元素，就会自动定位过去。

都坐下，基操勿六。

三、案例2：菜单hover悬停跟随效果

实时效果如下（如果没有效果，请升级浏览器或者系统）：

联系博主

欢迎关注

点赞

分享

想了下，还是录了个GIF示意了下：

宽度自动适应，无需JS计算，CSS伪元素创建背景内阴影，无需额外的HTML占用。

完整的代码如下所示：

<menu id="menu">
    <li><a href="##">联系博主</a></li>
    <li><a href="##">欢迎关注</a></li>
    <li><a href="##">点赞</a></li>
    <li><a href="##">分享</a></li>
</menu>

CSS部分：

menu {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #333;
    width: 320px;
    /* 动效元素创建 */
    &::before {
        content: '';
        position: absolute;
        position-anchor: --anchor-select;
        left: anchor(left);
        top: anchor(top);
        width: anchor-size(width);
        height: calc(1.5em + 12px);
        transition: .3s ease-in-out;
        box-shadow: inset 0 0 8px color-mix(in srgb, lightblue 80%, transparent);
        pointer-events: none;
    }
    li {
        flex: auto;
        line-height: 1.5;
    }
    a {
        display: block;
        padding: 6px 10px;
        text-decoration: none;
        color: #fff;
        text-align: center;
    }
    :where(&:not(:hover)) .selected,
    a:hover {
        anchor-name: --anchor-select;
    }
}

然后几行JS模拟点击选中的状态：

document.getElementById('menu').onclick = function (e) {
    e.preventDefault();
    this.querySelector('.selected')?.classList.remove('selected');
    e.target.classList.add('selected');
}

就结束了，实际上还是比较简单的。

如果浏览器不支持？

如果浏览器不支持，那我们就直接当前菜单元素创建个内阴影就好了，不影响功能。

也就是，锚点定位其实可以作为增强特性使用，不会影响现有的实现，赶快在现在的项目用起来吧。

四、结束语，再聊AI

今天遇到个奇怪的事情，我在本地创建demo的时候，AI居然自动把我的抖音钓鱼账号给吐出来了，我靠，怎么回事？

最近使用AI的频率更多，更熟练了，会员也买多了，什么WPS会员，剪映SVIP，都是因为一些AI功能。

还有就是最近的校招……嗯，这个不能说，过。

项目开发也用得比较多，特别是组件提取，搭好框架之后的填充，都大大提高了效率。

还有就是项目发布时候的报错，以前那些Node报错看得我头大，显然粘贴给AI，分分钟找到问题所在，比方说最近的安装Prettier导致发布出错，AI在某个地方加了个 | exit 0解决了，要是我自己，没有个半天，是搞不定的。

不过也有蛋疼的事情，比方说有一张图，我想要去掉水印，就让AI处理，结果AI打上了自己的水印，还真是……有趣。

不过也有不足，我认为豆包的图像生成能力反而下降了，可能一致性这块提高了，但是最终效果总是想要的不同，比方说最近文章封面的生成，还有小说封面的生成，都远不如之前。

行了，就说这么多吧。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11886

（本篇完）