当前位置：首页 > news >正文

文字投影效果

news 来源：原创 2025/5/18 17:30:20

大家好，我是喝西瓜汁的兔叽，今天给大家分享一个常见的文字投影效果。

效果展示

我们来实现一个这样的文字效果。

在这里插入图片描述

思路分析

这样的效果如何实现的呢?

实际上是两组相同的文字，叠合在一块，只不过对应的css不同罢了。

首先，body设置为灰色。

我们分两个元素，一个是文字，一个是倒影。

文字我们设置为白色，加粗。

最重要的就是，投影部分，投影元素我们使用绝对定位让和原文字重合，之后设置投影倾斜，偏移到合适位置，这些使用css3中的tranform即可。

最后我们加上模糊和文字蒙版即可。

filter:blur(5px);
mask:linear-gradient(to bottom, transparent 0%, black 100%);

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字投影效果</title><style>body {background: #aaa;}.greet {font-size: 120px;font-weight: bold;color: #fff;text-align: center;margin: 200px auto;position: relative;}.greet::before {content: 'DARKNESS';position: absolute;color: #000;transform: translate(-46px, 12px) skew(50deg) scaleY(0.7);z-index: -1;font-weight: bold;/* 模糊 */filter: blur(5px);/*  给文字加上渐变蒙版 */mask: linear-gradient(to bottom, transparent 0%, black 100%);}</style>
</head><body><div class="greet">DARKNESS</div></body></html>

好啦，以上就结束啦，大家如果感兴趣可以去学习一下cssmask属性哦~

朋友，我是喝西瓜汁的兔叽，感谢您的阅读，衷心祝福您和家人身体健康，事事顺心。

文字投影效果

大家好，我是喝西瓜汁的兔叽，今天给大家分享一个常见的文字投影效果。效果展示我们来实现一个这样的文字效果。思路分析这样的效果如何实现的呢? 实际上是两组相同的文字，叠合在一块，只不过对应的css不同罢了。首先&…...

编程日记 2025/5/18 17:30:20

【Redis】set 和 zset 类型的介绍和常用命令

1. set 1.1 介绍 set 类型和 list 不同的是，存储的元素是无序的，并且元素不允许重复，Redis 除了支持集合内的增删查改操作，还支持多个集合取交集，并集，差集 1.2 常用命令命令介绍时间复杂度 sadd …...

编程日记 2025/5/15 4:43:28

Clion开发STM32时使用stlink下载程序与Debug调试

一、下载程序先创建一个文件夹： 命名：stlink.cfg 写入以下代码: # choose st-link/j-link/dap-link etc. #adapter driver cmsis-dap #transport select swdsource [find interface/stlink.cfg]transport select hla_swdsource [find target/stm32f4x.…...

编程日记 2025/5/18 17:08:04

HarmonyOS：给您的应用添加通知

一、通知介绍通知旨在让用户以合适的方式及时获得有用的新消息，帮助用户高效地处理任务。应用可以通过通知接口发送通知消息，用户可以通过通知栏查看通知内容，也可以点击通知来打开应用，通知主要有以下使用场景： 显示…...

编程日记 2025/5/18 17:19:56

scrape登录（js逆向）

url:链接首先登录抓包可以看到token进行了加密可以直接去全局搜索token 可以看到在这里进行了加密进入encode，处理from后进行加密首先这一段复制js，缺什么补什么， code cb_utob function(e) {if (e.length < 2) {var r e.cha…...

编程日记 2025/5/17 4:30:20

后台管理系统通用页面抽离=＞高阶组件+配置文件+hooks

目录结构配置文件和通用页面组件 content.config.ts const contentConfig {pageName: "role",header: {title: "角色列表",btnText: "新建角色"},propsList: [{ type: "selection", label: "选择", width: "80px&q…...

编程日记 2025/5/17 20:00:56

RDP协议详解

以下内容包含对 RDP（Remote Desktop Protocol，远程桌面协议）及其开源实现 FreeRDP 的较为系统、深入的讲解，涵盖协议概要、历史沿革、核心原理、安全机制、安装与使用方法、扩展与未来发展趋势等方面， --- ## 一、引…...

编程日记 2025/5/18 16:55:03

Spring Boot - 数据库集成06 - 集成ElasticSearch

Spring boot 集成 ElasticSearch 文章目录 Spring boot 集成 ElasticSearch一：前置工作1：项目搭建和依赖导入2：客户端连接相关构建3：实体类相关注解配置说明二：客户端client相关操作说明1：检索流程1.1&…...

编程日记 2025/5/18 16:58:17

虚幻UE5手机安卓Android Studio开发设置2025

一、下载Android Studio历史版本步骤1：虚幻4.27、5.0、5.1、5.2官方要求Andrd Studio 4.0版本； 5.3、5.4、5.5官方要求的版本为Android Studio Flamingo | 2022.2.1 Patch 2 May 24, 2023 虚幻官网查看对应Andrd Studiob下载版本： https:/…...

编程日记 2025/5/18 17:09:26

Flutter开发环境配置

下载 Flutter SDK 下载地址：https://docs.flutter.cn/get-started/install M1/M2芯片选择带arm64字样的Flutter SDK。解压 cd /Applications unzip ~/Downloads/flutter_macos_arm64_3.27.3-stable.zip执行 /Applications/flutter/bin/flutterManage your Flut…...

编程日记 2025/5/18 16:53:33

[免费]微信小程序智能商城系统(uniapp+Springboot后端+vue管理端)【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的微信小程序智能商城系统(uniappSpringboot后端vue管理端)，分享下哈。项目视频演示【免费】微信小程序智能商城系统(uniappSpringboot后端vue管理端) Java毕业设计_哔哩哔哩_bilibili 项目介绍…...

编程日记 2025/5/18 17:12:35

rust操作pgsql、mysql和sqlite

rust中，有很多技术可以操作pgsql、mysql和sqlite，以sqlx为主流技术。我们以sqlx操作sqlite为示例，操作pgsql和mysql的办法是一样的。 Cargo.toml: [package] name "test" version "0.1.0" edition "2021"…...

编程日记 2025/5/18 17:14:05

5. 【Vue实战--孢子记账--Web 版开发】-- 主页UI

我们在实现个人中心的时候简单的搭建了一个主页UI，但是这个主页并不是我们需要的，在这一节我们将一起实现主页UI的搭建。一、功能主页UI的原型如下: 首页UI原型包括左侧菜单和顶部header，左侧菜单包含多个功能模块的链接：首页…...

编程日记 2025/5/18 17:10:56

RabbitMQ5-死信队列

目录死信的概念死信的来源死信实战死信之TTl 死信之最大长度死信之消息被拒死信的概念死信，顾名思义就是无法被消费的消息，一般来说，producer 将消息投递到 broker 或直接到queue 里了，consumer 从 queue 取出消息进…...

编程日记 2025/5/18 17:01:51

使用 PyTorch 实现逻辑回归并评估模型性能

1. 逻辑回归简介逻辑回归是一种用于解决二分类问题的算法。它通过一个逻辑函数（Sigmoid 函数）将线性回归的输出映射到 [0, 1] 区间内，从而将问题转化为概率预测问题。如果预测概率大于 0.5，则将样本分类为正类；否则分…...

编程日记 2025/5/18 17:03:25

Rust 函数使用详解

Rust 函数使用详解函数是 Rust 程序的基本构建块之一。通过函数，我们可以将代码组织成可重用的模块。本文将从函数签名语法、函数参数、语句与表达式、函数返回值等角度详细介绍 Rust 函数的使用，并通过综合示例展示这些知识点的实际应用。 1. 函数签名…...

编程日记 2025/5/18 17:03:25

ARM TEE

在ARM的语境中，TEE是Trusted Execution Environment（可信执行环境）的缩写。ARM TEE就是基于ARM架构实现的可信执行环境，以下是具体介绍： 定义与原理定义：ARM TEE是基于独立硬件，和主操作系统…...

编程日记 2025/5/18 16:58:18

Miniconda 安装及使用

文章目录前言1、Miniconda 简介2、Linux 环境说明2.1、安装2.2、配置2.3、常用命令2.4、常见问题及解决方案前言在 Python 中，“环境管理”是一个非常重要的概念，它主要是指对 Python 解释器及其相关依赖库进行管理和隔离，以确保开发环境…...

编程日记 2025/5/18 17:14:04

解析 Oracle 中的 ALL_SYNONYMS 和 ALL_VIEWS 视图：查找同义词与视图的基础操作

目录前言1. ALL_SYNONYMS 视图2. ALL_VIEWS 视图3. 扩展前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. ALL_SYNONYMS 视图在 Oracle 数据库中，同义词（Synonym）是对数…...

编程日记 2025/5/18 17:16:56

C#面向对象(封装)

1.什么是封装? C# 封装封装被定义为“把一个或多个项目封闭在一个物理的或者逻辑的包中”。在面向对象程序设计方法论中，封装是为了防止对实现细节的访问。抽象和封装是面向对象程序设计的相关特性。抽象允许相关信息可视化，封装则使开发者实现所…...

编程日记 2025/5/18 17:09:26

【深度分析】DeepSeek大模型技术解析：从架构到应用的全面探索

深度与创新：AI领域的革新者 DeepSeek，这个由幻方量化创立的人工智能公司推出的一系列AI模型，不仅在技术架构上展现出了前所未有的突破，更在应用领域中开启了无限可能的大门。从其混合专家架构（MoE）到多头潜…...

编程日记 2025/5/18 17:16:57

【新春特辑】2025年1月科技浪潮中的AI最新时事与科技趋势

2025年1月科技浪潮中的AI最新时事与科技趋势一、AI科技时事人工智能代理（AI Agent）的发展最新进展：人工智能代理正逐步成为科技领域的新热点。这些代理能够自主执行特定任务，如管理日程、回复邮件等。然而，它们仍…...

编程日记 2025/5/14 7:00:18

使用PyTorch实现逻辑回归：从训练到模型保存与性能评估

1. 引入必要的库首先，需要引入必要的库。PyTorch用于构建和训练模型，pandas和numpy用于数据处理，scikit-learn用于计算性能指标。 import torch import torch.nn as nn import torch.optim as optim import pandas as pd import numpy as …...

编程日记 2025/5/18 1:18:58

【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.24 随机宇宙：生成现实世界数据的艺术

1.24 随机宇宙：生成现实世界数据的艺术目录 #mermaid-svg-vN1An9qZ6t4JUcGa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vN1An9qZ6t4JUcGa .error-icon{fill:#552222;}#mermaid-svg-vN1An9qZ6t4JUc…...

编程日记 2025/5/18 0:10:45

C#面试常考随笔8：using关键字有哪些用法？

1. using 指令：引入命名空间最常用的用法。通过using 命名空间名字，可以在程序中直接使用该命名空间中的类型，而无需指定类型的完整命名空间路径。例如： using System; using System.Collections.Generic; class Program {sta…...

编程日记 2025/5/17 21:05:28

lstm代码解析1.2

在使用 LSTM（长短期记忆网络）进行训练时，model.fit 方法的输入数据 X 和目标数据 y 的形状要求是不同的。具体来说： 1. 输入数据 X 的形状 LSTM 层期望输入数据 X 是三维张量，形状为 (samples, timesteps, features)…...

编程日记 2025/5/18 16:56:58

JavaScript系列（52）--编译优化技术详解

JavaScript编译优化技术详解 🚀 今天，让我们深入探讨JavaScript的编译优化技术。通过理解和应用这些技术，我们可以显著提升JavaScript代码的执行效率。编译优化基础概念 🌟 💡 小知识：JavaScript引擎通常…...

编程日记 2025/5/17 16:04:38

【Python】第七弹---Python基础进阶：深入字典操作与文件处理技巧

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】目录 1、字典 1.1、字典是什么 1.2、创建字典 1.3、查找 key 1.4、新增/修改元素 1.5、删除元素 1.6、遍历…...

编程日记 2025/5/18 17:19:55

【狂热算法篇】探秘图论之Dijkstra 算法：穿越图的迷宫的最短路径力量（通俗易懂版）

羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C/C题海汇总,AI学习,c的不归之路,等方面的知识,羑悻的小杀马特.关注算法,c,c语言,青少年编程领域.https://blog.csdn.net/2401_82648291?typebbshttps://blog.csdn.net/2401_82648291?typebbshttps://blog.csdn.net/2401_8264829…...

编程日记 2025/5/16 10:40:00

Electricity Market Optimization 探索系列（一）

本文参考链接：Linear Programming Mini Example 先从一个线性规划的例子说起： 问题背景： 现在需要使用两台发电机满足用户的用电需求，发电机一的发电功率上限是 6MW，发电机二的发电功率上限是 4MW，发电…...

编程日记 2025/5/16 22:36:53

＜iframe＞标签和定时调用函数setInterval

iframe 标签和定时调用函数 setInterval 问题描述：解决方法： 问题描述： 今天遇到一个前端问题，在浏览器页面上传Excel文件后，然后点击导入按钮，经后端Java类读取文件内容校验后，将校验结果返回…...

编程日记 2025/5/17 9:19:31

网工_HDLC协议

2025.01.25：网工老姜学习笔记第9节 HDLC协议 9.1 HDLC高级数据链路控制9.2 HDLC帧格式（*控制字段）9.2.1 信息帧（承载用户数据，0开头）9.2.2 监督帧（帮助信息可靠传输，10开头&#xf…...

编程日记 2025/5/14 9:04:51

Elasticsearch：如何搜索含有复合词的语言

作者：来自 Elastic Peter Straer 复合词在文本分析和标记过程中给搜索引擎带来挑战，因为它们会掩盖词语成分之间的有意义的联系。连字分解器标记过滤器等工具可以通过解构复合词来帮助解决这些问题。德语以其长复合词而闻名：Rindfleischetik…...

编程日记 2025/5/18 17:27:13

【Go语言圣经】第六节：方法

第六章：方法 6.1 方法声明在函数声明时，在其名字之前放上一个变量，这就是声明了变量对应类型的一个方法，相当于为这种类型定义了一个独占的方法。下例为 Point 类型声明了计算两个点之间距离的方法： package mai…...

编程日记 2025/5/18 17:00:08

[答疑]DDD伪创新哪有资格和仿制药比

DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集远航 2025-1-24 10:40 最近的热门话题仿制药，想到您经常批评的伪创新，这两者是不是很像？ UMLChina潘加宇伪创新哪有资格和仿制药比。仿制药的…...

编程日记 2025/5/18 17:25:47

MySQL（高级特性篇） 13 章——事务基础知识

一、数据库事务概述事务是数据库区别于文件系统的重要特性之一 （1）存储引擎支持情况 SHOW ENGINES命令来查看当前MySQL支持的存储引擎都有哪些，以及这些存储引擎是否支持事务能看出在MySQL中，只有InnoDB是支持事务的 &#x…...

编程日记 2025/5/13 0:10:27

javascript常用函数大全

javascript函数一共可分为五类： •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显…...

编程日记 2025/5/11 18:29:39

第26节课：内容安全策略（CSP）—构建安全网页的防御盾

目录 CSP基础CSP的作用CSP的主要属性配置CSP通过响应头配置CSP通过HTML <meta>标签配置CSP属性设置详解指定多个来源配置示例说明常见错误配置实践：CSP与XSS防护示例1：防止内联脚本和样式说明示例2：限制图片来源说明限制与注意事项…...

编程日记 2025/5/16 0:12:43

【大坑】使用element-ui弹窗$confirm自动弹出

插入element-ui的弹窗后页面一刷新自动弹出，事件绑定、调用位置（生命周期）均没有问题，通过不断注释组件发现是main.js全局引入导致的问题。如果需要在某些组件中使用三方弹窗，可以按需引入，而不是全局注册 …...

编程日记 2025/5/12 3:21:37

Spring的AOP思想中事物管理注意点

我们以事务管理实现AOP思想通过在Service层加入事务管理,因为Service层可能使用多个DAO(多条SQL语句) 要保证这些SQL要么同时成功,要么同时失败,例如:学生Serivce:删除学生的时候,还需要删除学生关联信息(选课信息) 只有都删除成功才提交,如果有一条执行失败…...

编程日记 2025/5/14 4:37:47

PHP Mail：高效邮件发送解决方案详解

PHP Mail：高效邮件发送解决方案详解引言在互联网时代，邮件作为最常用的沟通方式之一，已经成为企业和个人不可或缺的通讯工具。PHP作为一种流行的服务器端脚本语言，在邮件发送方面具有天然的优势。本文将详细介绍PHP Mail&…...

编程日记 2025/5/17 9:19:27

python recv的概念和使用案例

recv 是网络编程中用于从套接字接收数据的核心函数，常见于 TCP/UDP 通信。以下是其概念、用法和案例详解： 概念作用：从已连接（TCP）或已绑定（UDP）的套接字接收数据。参数： bufsize:…...

编程日记 2025/5/12 9:40:30

安卓(android)读取手机通讯录【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的（如果代码有错漏，可在代码地址查看） 1.熟悉内容提供者(Content Provider)的概念和作用。 2.掌握内容提供者的创建和使用方法。 4.掌握内容URI的结构和用途。二、实验条件 1.熟悉内容提供者的工作原理。 2.掌握内容提供者访问其…...

编程日记 2025/5/13 12:56:55

Java知识速记 == 与equals

Java知识速记与equals 1. 操作符概述操作符用于比较基本数据类型的值，或者比较引用类型的对象是否指向同一内存地址。对于基本数据类型，例如int、float等，会比较其值；但对于对象，只会比较两个对象的引用&#xff…...

编程日记 2025/5/17 0:12:08

web集群

项目名称基于keepalivednginx构建一个高可用、高性能的web集群项目架构图项目描述基本描述构建一个基于 Nginx 的 7 层负载均衡的 Web 集群系统，模拟企业级业务环境，实现高并发和高可用性的 Web 集群。通过压力测试验证集群性能，找…...

编程日记 2025/5/15 13:51:26

HTMLCSS ：下雪了

这段代码创建了一个动态的雪花飘落加载动画，通过 CSS 技术实现了雪花的下落和消失效果，为页面添加了视觉吸引力和动态感。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能…...

编程日记 2025/5/15 3:06:28

Kafka SSL（TLS）安全协议

文章目录 Kafka SSL（TLS）安全协议1. Kafka SSL 的作用1.1 数据加密1.2 身份认证1.3 数据完整性1.4 防止中间人攻击1.5 确保安全的分布式环境1.6 防止拒绝服务（DoS）攻击 2. Kafka SSL 配置步骤（1）创建 SSL 证…...

编程日记 2025/5/17 17:16:04

WebForms SortedList 深度解析

WebForms SortedList 深度解析引言在Web开发领域，对于数据结构的理解与应用至关重要。其中，SortedList类在WebForms中是一个常用的数据结构，它能够帮助开发者高效地管理有序数据集合。本文将深入解析SortedList类在WebForms中的应用，包括其基本概念、常用方法、性能特点…...

编程日记 2025/5/18 8:29:01

项目集成Spring Security认证部分

一、需求分析在本项目中，使用了Spring Security框架来进行认证和授权管理。由于是前后端分离的项目，所有认证的请求需要通过Token来验证身份，系统中包括了用户登录、角色授权以及资源访问控制等功能。系统中的资源控制： 白名单…...

编程日记 2025/5/18 14:00:59

【PyTorch】7.自动微分模块：开启神经网络 “进化之门” 的魔法钥匙

目录 1. 梯度基本计算 2. 控制梯度计算 3. 梯度计算注意 4. 小节个人主页：Icomi 专栏地址：PyTorch入门在深度学习蓬勃发展的当下，PyTorch 是不可或缺的工具。它作为强大的深度学习框架，为构建和训练神经网络提供了高效且灵活…...

编程日记 2025/5/17 23:10:25

效果展示

思路分析

完整代码

相关文章：