抢先体验！超强的 Anchor Positioning 锚点定位
SegmentFault
共 18126字，需浏览 37分钟
·
2023-08-19 15:27
今天小编为大家带来的是社区作者 chokcoco 的文章，让我们一起来学习超强的 Anchor Positioning 锚点定位。
-
浏览器 URL 输入框输入：chrome://flags/ -
找到 Experimental Web Platform features 选项，开启该功能
何为 Anchor Positioning？
-
首先，锚点定位，需要我们通过新的锚点名称（anchor-name）来标记元素，允许我们使用这些经过了标记的元素作为我们绝对定位的基准目标； -
其次，我们可以在绝对定位的元素上，通过新的语法 anchor() 或者 anchor-size() 来锚定上述被标记了的元素，并且可以使用被标记元素的相应属性（譬如被标记元素的 top、left、right、bottom 等） -
并且，还有一些更高级的用法，譬如锚点定位的 Fallback 机制，也就是可以设置多套不同的锚点定位规则，以适应更为复杂的页面布局情况
<div class="g-container">
<div class="g-use-anchor"></div>
<div class="g-anchor-element"></div>
</div>.g-container {
position: relative;
width: 50vw;
height: 50vh;
border: 2px solid #666;
display: flex;
.g-anchor-element {
width: 25vw;
height: 25vh;
border: 2px dashed #333;
margin: auto;
}
.g-use-anchor {
position: absolute;
width: 20px;
height: 20px;
background: #fc0;
border-radius: 50%;
}
}
.g-container {
position: relative;
width: 50vw;
height: 50vh;
border: 2px solid #666;
display: flex;
.g-anchor-element {
width: 25vw;
height: 25vh;
border: 2px dashed #333;
margin: auto;
anchor-name: --target;
}
.g-use-anchor {
position: absolute;
width: 20px;
height: 20px;
background: #fc0;
border-radius: 50%;
top: anchor(--target top);
left: anchor(--target left);
}
}
-
我们给 .g-anchor-element 添加了一句 CSS 代码，anchor-name: --target，其含义为，将此元素设定为一个锚点元素，它的名字是 --target。
-
在 .g-use-anchor 中，新增了两句代码
-
top: anchor(--target top)：这里的意思是，使用 name 为 --target 的锚点元素作为定位基准，并且将元素的顶部（top）对齐到锚点元素的顶部（top） -
left: anchor(--target left)：同理，使用 name 为 --target 的锚点元素作为定位基准，并且将元素的左边（left）对齐到锚点元素的左边（left）
Anchor Positioning 锚点定位实战 -- 弹出框定位
<p class="g-container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, porro, <span>facere</span>, et incidunt error aliquam fugit pariatur eos labore ipsum voluptate magni culpa reiciendis optio at accusantium non! Quis, laboriosam.
Lorem ipsum dolor sit, <span>amet consectetur</span> adipisicing elit. Error commodi sequi perspiciatis ipsa veniam, aut, aliquam maiores quasi <span>adipisci tenetur </span>reiciendis dolor nihil aperiam labore, sunt qui ullam aspernatur <span>voluptate</span>.
</p>
p {
position: relative;
span {
color: deeppink;
}
&::before,
&::after {
position: absolute;
transition: 0;
opacity: 0;
}
&::before {
content: "";
top: calc(anchor(var(--target) top) + 10px);
left: calc(anchor(var(--target) left) + 5px);
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
&::after {
content: "Alert Tips!";
width: 80px;
padding: 2px 4px;
font-size: 14px;
background: #fff;
border: 2px solid #000;
top: calc(anchor(var(--target) top) + 24px);
left: anchor(var(--target) left);
right: anchor(var(--target) right);
}
}
p span:nth-child(1) {
anchor-name: --anchor-1;
}
p span:nth-child(2) {
anchor-name: --anchor-2;
}
p span:nth-child(3) {
anchor-name: --anchor-3;
}
p span:nth-child(4) {
anchor-name: --anchor-4;
}
p:has(span:nth-child(1):hover) {
--target: --anchor-1;
}
p:has(span:nth-child(2):hover) {
--target: --anchor-2;
}
p:has(span:nth-child(3):hover) {
--target: --anchor-3;
}
p:has(span:nth-child(4):hover) {
--target: --anchor-4;
}
p:has(span:hover)::before,
p:has(span:hover)::after{
opacity: 1;
}
-
通过 <p> 元素的两个伪元素 ::before 和 ::after，实现了弹出框的框体和一个小三角形 -
给每个 <span> 都设置了成了锚点，也就是这么一段代码：p span:nth-child(1) {anchor-name: --anchor-1;} -
关键来了，利用了 :has 选择器，实现了当哪个 <span> 被 hover，则设置 --target 变量为当前元素的 anchor-name，也就是实现了锚点元素的动态变换 -
最终，只需要让弹出框（也就是两个伪元素），基于 --target 进行定位即可，而 --target 元素，就是我们每次 Hover 的文字元素，那么弹框也就实现了动态定位
-
top: calc(anchor(var(--target) top) + 10px)：将弹框元素的顶部（top）对齐到锚点元素的顶部（top），再加上 10px 的向上间距 -
left: calc(anchor(var(--target) left) + 5px)：将弹框元素的左边（left）对齐到锚点元素的左边（left），再加上 5px 的左间距
p span:nth-child(1) {
anchor-name: --anchor-1;
}
p span:nth-child(2) {
anchor-name: --anchor-2;
}
p span:nth-child(3) {
anchor-name: --anchor-3;
}
p span:nth-child(4) {
anchor-name: --anchor-4;
}
p:has(span:nth-child(1):hover) {
--target: --anchor-1;
}
p:has(span:nth-child(2):hover) {
--target: --anchor-2;
}
p:has(span:nth-child(3):hover) {
--target: --anchor-3;
}
p:has(span:nth-child(4):hover) {
--target: --anchor-4;
}
@for $i from 1 to 100 {
p:has(span:nth-child(#{$i}):hover) {
--target: --anchor-#{$i};
}
p span:nth-child(#{$i}) {
anchor-name: --anchor-#{$i};
}
}
Anchor Positioning 锚点定位实战 -- Tab 切换下划线跟随效果
<ul>
<li>下</li>
<li>划</li>
<li>线</li>
<li>跟</li>
<li>随</li>
<li>动</li>
<li>画</li>
</ul>
-
下划线通过 <ul>元素的伪元素实现 -
给每个 <li> 都设置了成了锚点 -
利用了 :has 选择器，实现当任意一个 <li> 被 hover，则设置 --target 锚点变量为当前的 <li> 元素，也就是实现了锚点元素的动态变换 -
最终，只需要让下划线，基于动态的锚点进行定位即可，也就是我们每次 Hover 的 li 元素，那么弹框也就实现下划线动态定位 -
给下划线的 left 设置过渡效果 transition，实现跟随动画效果
ul {
position: relative;
width: 700px;
display: flex;
li {
flex-grow: 1;
}
&::before {
position: absolute;
content: "";
height: 5px;
background: transparent;
bottom: 0;
left: anchor(var(--target) left);
right: anchor(var(--target) right);
transition: .3s all;
transform: scaleX(5);
}
}
ul:hover::before {
background: #000;
transform: scaleX(1);
}
@for $i from 1 to 8 {
ul:has(li:nth-child(#{$i}):hover) {
--target: --anchor-#{$i};
}
li:nth-child(#{$i}) {
anchor-name: --anchor-#{$i};
}
}
兼容性
-
浏览器 URL 输入框输入：chrome://flags/ -
找到 Experimental Web Platform features 选项，开启该功能
最后
往期推荐
社区精选｜Spring 中 @Qualifier 注解还能这么用？
社区精选｜【动画进阶】神奇的 3D 磨砂玻璃透视效果
社区精选｜效率max：AI读了源码后再教我
评论