记录文字视差背景学习

效果图
在这里插入图片描述
文字背景会随鼠标上下移动变成红色或透明
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字视差背景</title>
</head>
<style>
    body{
        background: #eeece5;
        padding: 50vh 0;
        text-align: center;
        font-size: 2.5em;
    }
    h1{
        background: linear-gradient(to bottom, #fe4e00 50%,#0000 50%) center center/ 100vw 100vh fixed;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-stroke: 2px #fe4e00;
    }
</style>
<body>
    <h1>2024,万事可期</h1>
</body>
</html>

相关推荐

  1. SpringCloud 学习笔记 —— 一、背景

    2024-07-11 19:14:01       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 19:14:01       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 19:14:01       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 19:14:01       45 阅读
  4. Python语言-面向对象

    2024-07-11 19:14:01       55 阅读

热门阅读

  1. 【React Hooks原理 - useReducer】

    2024-07-11 19:14:01       17 阅读
  2. 2024.7.10 刷题总结

    2024-07-11 19:14:01       22 阅读
  3. 什么是逻辑运算中的短路效应?

    2024-07-11 19:14:01       18 阅读
  4. 开发指南043-自定义注解

    2024-07-11 19:14:01       22 阅读
  5. C语言 比较两个字符串

    2024-07-11 19:14:01       18 阅读
  6. Andt Desgin Vue Pro 项目添加前缀访问解决

    2024-07-11 19:14:01       15 阅读
  7. MDA协议

    2024-07-11 19:14:01       19 阅读
  8. Spring Boot中集成DJL运行Python PyTorch模型:MNIST实战

    2024-07-11 19:14:01       17 阅读
  9. GraphSAGE项目练手

    2024-07-11 19:14:01       20 阅读