CSS锚点定位实战-鼠标跟随交互效果 - 张鑫旭-鑫空间-鑫生活

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

一、前言之锚点定位简介

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

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

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

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

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

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

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

最会钓鱼的程序员

张鑫旭本人

其他

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

    博主的钓鱼抖音账号名称是：    
                最会钓鱼的程序员    
    
                张鑫旭本人    
    
                其他    

.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。

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

都坐下，基操勿六。

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

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

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

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

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

完整的代码如下所示：

    
联系博主
    
欢迎关注
    
点赞
    
分享

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

（本篇完）

查看原文：CSS锚点定位实战-鼠标跟随交互效果 - 张鑫旭-鑫空间-鑫生活