html鼠标跟随特效代码
时间: 2023-10-09 20:15:20 浏览: 47
以下是一段简单的HTML和CSS代码,可以实现鼠标跟随特效:
HTML代码:
```
<div class="box">
<h1>鼠标跟随特效</h1>
</div>
```
CSS代码:
```
.box {
position: relative;
display: inline-block;
}
.box h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box:hover h1 {
color: red;
}
.box:hover:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
transform: translate(-50%, -50%);
z-index: -1;
}
```
这段代码的实现原理是,在鼠标移动到盒子上方时,使用:hover伪类来改变标题的颜色,并在盒子内部创建一个伪元素:before,模拟一个红色圆点跟随鼠标移动。
相关问题
html鼠标跟随粒子特效
HTML鼠标跟随粒子特效可以通过CSS和JavaScript实现。下面是一份示例代码:
HTML部分:
```html
<div class="particles"></div>
```
CSS部分:
```css
.particles {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
background-color: #fff;
border-radius: 50%;
opacity: 0.5;
}
```
JavaScript部分:
```javascript
var particles = document.querySelector('.particles');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
for (var i = 0; i < 5; i++) {
var particle = document.createElement('div');
particle.classList.add('particle');
particles.appendChild(particle);
var size = Math.random() * 10;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.top = y + 'px';
particle.style.left = x + 'px';
var speed = Math.random() * 3;
var angle = Math.random() * 360;
var vx = Math.cos(angle) * speed;
var vy = Math.sin(angle) * speed;
animateParticle(particle, x, y, vx, vy);
}
});
function animateParticle(particle, x, y, vx, vy) {
var time = Math.random() * 1000 + 500;
setTimeout(function() {
particle.style.top = (y + vy * time / 1000) + 'px';
particle.style.left = (x + vx * time / 1000) + 'px';
particle.style.opacity = 0;
setTimeout(function() {
particles.removeChild(particle);
}, 1000);
}, time);
}
```
说明:
- HTML部分只需要一个空的div容器用于存放粒子元素。
- CSS部分定义了粒子容器和粒子元素的样式。
- JavaScript部分监听鼠标移动事件,并在鼠标位置生成多个粒子元素,然后让它们随机运动并逐渐消失。具体实现方式是通过setTimeout和计算粒子位置来模拟动画效果。
js鼠标跟随特效小星星
可以使用CSS3和JavaScript实现一个鼠标跟随特效小星星。以下是具体步骤:
1. 在HTML中创建一个包含小星星的div元素,并设置其样式为圆形。
```html
<div id="star"></div>
```
```css
#star {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -100px;
left: -100px;
z-index: 9999;
pointer-events: none;
transition: 0.2s ease-out;
}
```
2. 使用JavaScript监听鼠标移动事件,并根据鼠标的位置,移动小星星的位置。
```javascript
const star = document.querySelector("#star");
document.addEventListener("mousemove", (e) => {
let x = e.clientX;
let y = e.clientY;
star.style.top = y + "px";
star.style.left = x + "px";
});
```
3. 为了使小星星有一个平滑的移动效果,可以添加CSS过渡效果。
```css
#star {
// ...
transition: 0.2s ease-out;
}
```
这样就可以实现一个简单的鼠标跟随特效小星星了。你可以根据自己的需求调整小星星的大小和样式。