这篇博客介绍了一种利用CSS变量`var()`和`:root`选择器来动态设置元素位置的方法。通过将鼠标坐标定义为CSS变量，并在`div::after`伪元素中使用`counter-reset`和`content`属性，可以实时显示鼠标的位置。同时，博客还展示了如何通过`calc()`函数和`transform`属性来根据鼠标坐标调整元素的定位。
CSS
语言：
CSSSCSS
确定
:root {
--mouse-x: 200;
--mouse-y: 200;
}
/* See: http://stackoverflow.com/q/40164169/4172644*/
div::after {
counter-reset: mouse-x var(--mouse-x) mouse-y var(--mouse-y);
content: counter(mouse-x) "px, " counter(mouse-y) "px";
}
/* setup and presentation styles */
div::before {
content: 'mouse position';
font-weight: bold;
}
div {
position: fixed;
top: 0;
left: 0;
-webkit-transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px));
transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px));
width: 10em;
height: 10em;
background: #9ccf5e;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 2;
border-radius: 100%;
will-change: transform;
}
body {
margin: 2em;
font-family: sans-serif;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
