抢先体验!超强的 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读了源码后再教我
评论