段代码实现了一个动态的标题效果，标题文字显示为“浪漫星空”（可编辑），背景为一张图片。当鼠标在页面上移动时，标题的背景图片会根据鼠标位置动态偏移，营造出一种星空随鼠标移动而变化的视觉效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
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动态调整。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
