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

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

相关推荐
软件技术NINI1 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
苏打水com2 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
~无忧花开~2 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
嬉皮客4 小时前
TailwindCSS 初探
前端·css
西西学代码6 小时前
Flutter---音效模式选择器
前端·html
键盘不能没有CV键11 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
云知谷15 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'15 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'15 小时前
css `dorp-shadow`
前端·css
昔人'19 小时前
`tanslate=“no“`避免使用 HTML 中的翻译属性自动翻译品牌名称等
html