在CSS中,可以使用伪元素和动画来实现圆圈跟随鼠标移动的效果,而不需要使用JavaScript。下面是一个实现该效果的示例代码:
HTML代码:
<div class="circle"></div>
CSS代码:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff0000;
animation: followMouse 1s infinite;
}
@keyframes followMouse {
0% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(calc(-50% + var(--mouse-x)), calc(-50% + var(--mouse-y)));
}
}
body {
--mouse-x: 0;
--mouse-y: 0;
}
body:hover {
--mouse-x: calc((100vw - 50px) / 100);
--mouse-y: calc((100vh - 50px) / 100);
}
上述代码中,通过设置.circle
元素的position: absolute
属性,使其脱离文档流,并通过top
和left
属性将其定位在页面的中心位置。然后,使用transform
属性和translate
函数将其水平和垂直居中。
接下来,通过animation
属性和@keyframes
规则创建一个名为followMouse
的动画。该动画在0%和100%的关键帧中分别设置了初始位置和最终位置,通过calc
函数结合--mouse-x
和--mouse-y
变量来实现跟随鼠标移动的效果。
在body
元素中,使用CSS变量--mouse-x
和--mouse-y
来存储鼠标的位置信息。通过将这两个变量设置为鼠标相对于视口宽度和高度的百分比,实现了鼠标移动时圆圈跟随的效果。
最后,通过将body
元素的hover
伪类选择器与--mouse-x
和--mouse-y
变量结合使用,使得圆圈在鼠标悬停在页面上时跟随鼠标移动。
这种实现方式不需要使用JavaScript,只使用了CSS和HTML来实现圆圈跟随鼠标移动的效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云