要使用 CSS 根据鼠标位置实时计算元素尺寸，需要用到 CSS3 中的变量（variable）、calc() 函数和鼠标事件。具体步骤如下：
:root {
--mouse-x: 0;
--mouse-y: 0;
}其中，:root 表示文档根元素，--mouse-x 和 --mouse-y 分别是存储鼠标横坐标和纵坐标的变量。
mousemove 事件监听鼠标移动事件，将鼠标位置存储到变量中，如下所示：body {
/* 监听鼠标移动事件 */
cursor: none;
pointer-events: none;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0,0,0,0.05);
}
body::after {
content: "";
position: fixed;
top: var(--mouse-y);
left: var(--mouse-x);
z-index: 1;
width: calc(100% - var(--mouse-x));
height: calc(100% - var(--mouse-y));
background: rgba(0,0,0,0.2);
}
body:hover::before {
background: rgba(0,0,0,0);
}
body:hover::after {
background: rgba(0,0,0,0.2);
}
body:hover {
cursor: none;
}
body:hover::before {
pointer-events: none;
}
body:hover::after {
pointer-events: none;
}
body:hover .box {
transform: scale(0.9);
}其中，:before 伪元素和 :after 伪元素分别用于覆盖整个页面和显示动态的元素，calc() 函数可以用于计算元素的尺寸，hover 用于监听鼠标悬停事件。pointer-events 属性可以设置鼠标事件的响应方式。
.box {
width: calc(var(--mouse-x) * 1px);
height: calc(var(--mouse-y) * 1px);
}其中，.box 是要动态计算尺寸的元素。
通过以上步骤，就可以实现根据鼠标位置实时计算元素尺寸的效果了。