段代码实现了一个动态的标题效果，标题文字显示为“浪漫星空”（可编辑），背景为一张图片。当鼠标在页面上移动时，标题的背景图片会根据鼠标位置动态偏移，营造出一种星空随鼠标移动而变化的视觉效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>公众号关注：前端Hardy</title>
<style>
html {
width: 100%;
height: 100%;
}
body {
background: #8e9eab;
background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3);
background: linear-gradient(to left, #8e9eab , #eef2f3);
margin: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
max-wisth: 100%;
cursor: pointer;
}
.title {
color: #333;
letter-spacing: -5px;
margin-left: -16px;
font-weight: 800;
color: transparent;
font-size: 100px;
background: url("https://download.unsplash.com/uploads/14116941824817ba1f28e/78c8dff1") repeat;
background-position: 30% 10%;
background-size: 200%;
-webkit-background-clip: text;
position: relative;
text-align: center;
line-height: 90px;
text-transform: uppercase;
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="title" contenteditable>浪漫星空</div>
</div>
<script>
$(document).ready(function () {
var mouseX, mouseY;
var ww = $(window).width();
var wh = $(window).height();
var traX, traY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 350) + 10;
traY = ((4 * mouseY) / 350) + 20;
$(".title").css({ "background-position": traX + "%" + traY + "%" });
});
});
</script>
</body>
</html>
HTML 结构
- container：页面的主体容器，用于居中显示标题。
- title：显示标题内容（浪漫星空），支持内容编辑（contenteditable）。
CSS 样式
- body：设置页面背景为渐变色，从#8e9eab到#eef2f3，并设置页面宽高为100%。
- .container：将容器居中显示，通过transform: translate(-50%, -50%)实现。
- .title：定义标题的样式，包括：
- 文字颜色透明，背景为图片background。
- 使用-webkit-background-clip: text将背景裁剪为文字形状。
- 设置文字的字体、大小、行高、字母间距等。
- 背景图片通过background-position动态调整。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
