HTML&CSS ：这个标题特效，你必须要会

段代码实现了一个动态的标题效果，标题文字显示为"浪漫星空"（可编辑），背景为一张图片。当鼠标在页面上移动时，标题的背景图片会根据鼠标位置动态偏移，营造出一种星空随鼠标移动而变化的视觉效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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动态调整。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！