网站动态背景特效搞过来
时间: 2023-09-03 14:15:43 浏览: 45
要实现动态背景特效,可以使用CSS和JavaScript。以下是一个简单的例子:
HTML代码:
```
<div class="background"></div>
```
CSS代码:
```
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("your-image.jpg");
background-size: cover;
background-position: center center;
filter: blur(10px);
opacity: 0.5;
}
.background:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
```
JavaScript代码:
```
const background = document.querySelector(".background");
let mouseX = 0;
let mouseY = 0;
window.addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
});
function moveBackground() {
const translateX = mouseX / 50;
const translateY = mouseY / 50;
background.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
window.requestAnimationFrame(moveBackground);
}
moveBackground();
```
这段代码会在页面中创建一个带有模糊效果的背景,同时根据鼠标的位置动态移动。你需要将 `your-image.jpg` 替换为你自己的图片,并在CSS中自定义其他样式。