【纯CSS特效源码】(一)几款漂亮的文字特效

1.渐变文字

使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色
并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background-color: #111;}#content {position: absolute;top: 50%;left: 0;right: 0;color: #fff;text-align: center;font-family: sans-serif;font-weight: 400;font-size: 50px;letter-spacing: 15px;margin-top: -60px;padding-left: 10px;}#content span {background: -webkit-linear-gradient(#d8ecec, #2d888b);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style><body><div id="content"><span>八荒我为王</span><br /><span>FOOLISHSUNDAY</span></div></body>
</html>

2.滤镜发光

这里使用background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);
设置元素背景图像为线性渐变
并用-webkit-filter: drop-shadow(2px 2px 15px #b052b0);给文字添加一层发光滤镜
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background: #111; }.center-container {position: absolute;top: 20%;left: 0;right: 0;text-align: center;}.color-text {position: relative;font-size: 60px;font-family: Verdana, Geneva, STCaiyun, sans-serif;background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0;-webkit-filter: drop-shadow(2px 2px 15px #b052b0);}</style><body><div class="center-container"><span class="color-text">八荒我为王</span><h1 class="color-text">foolishsunday</h1></div></body>
</html>

3.倒影

这里使用“:before” 伪元素在元素的内容前面插入内容
使用transform: rotateX(180deg);进行180度翻转实现倒影效果
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background-color: #4158d0;background-image: linear-gradient(43deg,#4158d0 0%,#c850c0 46%,#ffcc70 100%);}h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 60px;white-space: nowrap;}h1::before {content: attr(data-text);position: absolute;transform: rotateX(180deg);transform-origin: bottom;line-height: 52px;background: linear-gradient(0deg, #000 0, transparent 80%);-webkit-background-clip: text;color: transparent;opacity: 0.5;}</style><body><h1 data-text="foolishsunday">foolishsunday</h1>
</html>

镀金字体

这里使用两层文字特效

      <div class="bg"> FOOLISHSUNDAY </div><div class="fg"> FOOLISHSUNDAY </div>

背景特效使用transform: scaleY(1.05);进行放大,使背景特效稍微凸出,达到描边镀金效果
在这里插入图片描述

<!DOCTYPE html>
<html><style>* {box-sizing: border-box;}:root {--gold: #ffb338;--light-shadow: #77571d;--dark-shadow: #3e2904;}body {margin: 0;}.wrapper {background: radial-gradient(#272727, #1b1b1b);display: grid;grid-template-areas: 'overlap';place-content: center;text-transform: uppercase;height: 100vh;}.wrapper > div {background-clip: text;  -webkit-background-clip: text;color: #363833;font-family: 'PingFang SC', sans-serif;font-weight: 900;font-size: clamp( 1em, 8vw, 8rem);grid-area: overlap;letter-spacing: 1px;-webkit-text-stroke: 4px transparent;}div.bg {background-image: repeating-linear-gradient( 105deg, var(--gold) 0% , var(--dark-shadow) 5%,var(--gold) 12%);color: transparent;filter: drop-shadow(5px 12px 5px black);transform: scaleY(1.05);transform-origin: top;}div.fg{background-image: repeating-linear-gradient( 5deg,  var(--gold) 0% , var(--light-shadow) 23%, var(--gold) 31%);color: #1e2127;transform: scale(1);}</style><body><div class="wrapper"><div class="bg"> FOOLISHSUNDAY </div><div class="fg"> FOOLISHSUNDAY </div></div>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通俗理解 | 波数的概念

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:波数的物理含义 揭开波数奥秘:波数的物理含义解读 通俗理解: 致力于在无需任何专业知识的前提下,从本质上理解专业的概念 背景介绍 在研究波动时,我们常会遇到一个重要物理量—…

汽车专业翻译,如何选择好的翻译公司?

随着中国汽车市场的不断壮大和国际化的步伐加快&#xff0c;众多外国汽车品牌纷纷进军中国市场&#xff0c;与此同时&#xff0c;国内汽车企业也在积极拓展海外版图。在此背景下&#xff0c;汽车企业与国际客户、供应商和合作伙伴的交流日益频繁。因此&#xff0c;拥有一支专业…

包图作业

包图作业 一. 简答题&#xff08;共2题&#xff0c;100分&#xff09; (简答题) .包依赖应该与内部关系的联系与区别 正确答案&#xff1a; 当一个包依赖于另一个是&#xff0c;这意味着两个包的内容间存在着一个或多个的关系。 例如&#xff1a;如果是一个用例包图&#xff0…

Javascript jQuery简介

✨前言✨ 1.如果代码对您有帮助 欢迎点赞&#x1f44d;收藏⭐哟 后面如有问题可以私信评论哟&#x1f5d2;️ 2.博主后面将持续更新哟&#x1f618;&#x1f389;本章目录&#x1f389; &#x1f95d;一.jQuery简介&#x1f965;二.JQeury常用API&#x1f347;1.jQeury选择…

Redis 如何做内存优化

Redis 如何做内存优化 Redis 提供了一些内存优化的手段&#xff0c;包括压缩、过期设置、分片等。下面是一些内存优化的方法和代码示例&#xff1a; 压缩存储&#xff1a; Redis 5.0 版本引入了对字符串的压缩存储功能&#xff0c;可以在字符串的存储和传输中进行压缩&#xf…

PingCAP 受邀参加 FICC 2023,获 Open100 世纪全球开源贡献奖

2023 年 12 月&#xff0c;2023 国际测试委员会智能计算与芯片联邦大会&#xff08;FICC 2023&#xff09;在海南三亚举办&#xff0c;中外院士和数十位领域专家莅临出席。 大会现场 &#xff0c;开放源代码促进会创始人 Bruce Perens 颁发了 Open100 世纪全球开源贡献奖&…

mysql 一对多 合并多个通过 逗号拼接展示

mysql 一对多 合并多个通过 逗号拼接展示 以上内容由chatgpt中文网 动态生成 SELECTuser_id,project_id,GROUP_CONCAT(project_specs_id) AS merged_specs_ids FROMzt_medication_specs_total WHEREspecs_num_total < 5 GROUP BYuser_id, project_id;laravel model 对应写…

UE5 通过接口实现角色描边效果

接口不能够被实例化&#xff0c;不能够在内部书写函数的逻辑和设置属性&#xff0c;只能够被继承使用。它能够让不同的类实现有相同的函数&#xff0c;继承接口的类必须实现接口的函数。 并且&#xff0c;我们可以在不同的类里面的函数实现也不同&#xff0c;比如A类描边是红色…

【2019】360Java工程师客观题总结

这套试卷比上次做的第一套要好一丢丢&#xff0c;但也没好到哪里去。。 一.运行下面测试方法&#xff0c;以下哪种输出是正确的 Testpublic void TestA() {assertEquals(4, 2 1);System.out.println("Test A");}首先我们要注意这里考察的是单元测试里的断言&#x…

什么是云服务器ECS及其优势、购买、使用方式和部署建议

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云百科aliyunbai…

超级好看的个人主页源码

源码介绍 超级好看的个人主页源码HTML,使用了 HTML、CSS 和 JavaScript 技术&#xff0c;带音乐播放器 需要修改什么到代码里面自行修改,记事本就可以打开&#xff0c;总之&#xff0c;这个个人主页源码非常漂亮和实用&#xff0c;使用了许多现代的 Web 技术来创建一个响应式、…

canvasdrawer 微信原生小程序生成海报图片

在小程序中生成海报是一种非常有效的推广方式 用户可以使用小程序的过程中生成小程序海报并分享给他人 通过海报的形式&#xff0c;用户可以直观地了解产品或服务的特点和优势 常见绘制海报方式 目前&#xff0c;小程序海报有两种常见的实现方式&#xff1a; canvas 绘制…

2024年1月12日:清爽无糖rio留下唇齿之间的香甜

友利奈绪的时间管理 2024年1月12日08:02:28进行java程序设计的上课准备 2024年1月12日08:02:44知道java的题目有18道 2024年1月12日08:43:07随机数去重比较 2024年1月12日08:54:03C语言题目最小公倍数 2024年1月12日08:58:37C语言题目二维数组变一维数组 2024年1月12日10…

Java学习,一文掌握Java之SpringBoot框架学习文集(8)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Nginx配置负载均衡实例

Nginx配置反向代理实例二 提醒一下&#xff1a;下面实例讲解是在Mac系统演示的&#xff1b; 负载均衡实例实现的效果 浏览器地址栏输入地址http://192.168.0.101/test/a.html&#xff0c;刷新页面进行多次请求&#xff0c;负载均衡效果&#xff0c;平均分配到8080端口服务和8…

SSM-SpringMVC+Spring+Mybatis

创建项目 创建好 项目后, 项目目录分析 数据库设计 我们采用员工表 Employee 与 部门表 Department 部门表 表设计--- 员工表 --表设计 因为有文件上传操作,因此 建立 info表 (其中 员工只能隶属一个部门,因此 两张表之间 有外键关系) java 代码 设计 数据库建立完毕后,需要…

通过离散点拟合曲线

文章目录 使用离散点拟合曲线参考代码路径:作者源码:测试代码效果图:k3k4k5 使用离散点拟合曲线 参考代码路径: https://www.bragitoff.com/2015/09/c-program-for-polynomial-fit-least-squares/ https://gist.github.com/Thileban/272a67f2affdc14a5f69ad3220e5c24b https:/…

网络安全产品之认识防火墙

防火墙是一种网络安全产品&#xff0c;它设置在不同网络&#xff08;如可信任的企业内部网和不可信的公共网&#xff09;或网络安全域之间&#xff0c;通过监测、限制、更改跨越防火墙的数据流&#xff0c;尽可能地对外部屏蔽网络内部的信息、结构和运行状况&#xff0c;以此来…

docker安装nacos+mysql+配置网络

一、配置网络 为什么要配置网络&#xff1f;因为 Nacos 内要连接MySQL数据库的&#xff0c;我的 MySQL 数据库也是用 Docker启动的&#xff0c;所以2个容器间要通信是需要配置他们使用相同的网络。这个操作要在启动Nacos容器之前。 注意&#xff1a;这里配置的网络只在镜像内部…

Linux消息队列

常用函数 //创建/获取消息队列 int msgget (key_t key, int msgflg); /* key : 为键值,ftok(); msgflg:IPC_CREAT - 创建&#xff0c;不存在即创建&#xff0c;已存在即获取&#xff0c;除非… IPC_EXCL - 排斥&#xff0c;已存在即失败。 */// 向消息队列发送消息 int msgs…