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

CSS灯光效果，背景黑金效果

news 文章来源：https://blog.csdn.net/qq_35241329/article/details/131150883 2025/1/13 2:53:37

先看效果
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>灯光效果</title><link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&amp;display=swap" type="text/css" rel="Stylesheets"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><style>:root {--glitter: url("https://assets.codepen.io/13471/silver-glitter-background.png");--ratio-x: .5;--ratio-y: .75;--from-center: .5;}main {--bgoffsetx: calc( 2.9px * var(--ratio-x));--bgoffsety: calc( 4.3px * var(--ratio-y));--pointerx: calc( 100% * var(--ratio-x));--pointery: calc( 100% * var(--ratio-y));--h: calc( 360deg * var( --from-center ) );--s: calc( 90% * var( --from-center ) );background: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%);background-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) );background-size: cover, 560px auto, 400px auto, cover;background-blend-mode: overlay, multiply, color, overlay;transition: opacity 4s ease-out;}main.loading {opacity: 0;}main {image-rendering: optimizeQuality;transform: translate3d(0, 0, 0.01px);}main * {pointer-events: none;text-anchor: middle;}main svg {mix-blend-mode: color-dodge;fill: #908190;opacity: calc( 1.5 - var(--from-center) );filter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3);}body {color: black;background: black;font-family: "Cinzel", sans-serif;}html, body, main {box-sizing: border-box;margin: 0;padding: 0;height: 100%;width: 100%;display: grid;place-items: center;grid-row: 1;}img {position: absolute;width: 1px;height: 1px;opacity: 0;}.social-icon {stroke-width: 1.25;stroke: cyan;fill: none;stroke-linecap: round;stroke-linejoin: round;position: absolute;bottom: 10px;right: 10px;width: 24px;height: 24px;z-index: 10;-webkit-animation: iconsLoad 10s ease both 1s;animation: iconsLoad 10s ease both 1s;}.social-icon.twitter {right: 40px;-webkit-animation-delay: 0s;animation-delay: 0s;}@-webkit-keyframes iconsLoad {from {opacity: 0;}to {opacity: 1;}}@keyframes iconsLoad {from {opacity: 0;}to {opacity: 1;}}</style>
</head>
<body>
<main id=app class=loading><svg viewBox="-50 0 100 20"><text x="0" y="15">Illuminate</text></svg>
</main>
<img src="https://assets.codepen.io/13471/silver-glitter-background.png" loading=lazy><a class="social-icon github" href="https://blog.csdn.net/qq_35241329?type=blog"><svg viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
</a>
</body>
<script>// 👆鼠标移动跟随代码$("main").on("pointermove", (e) => {interacted = true;const { x, y } = e.originalEvent;const BOX = e.target.getBoundingClientRect();const POINT = { x: x - BOX.x, y: y - BOX.y };const RATIO = { x: POINT.x / BOX.width, y: POINT.y / BOX.height };const CENTER = fromCenter( RATIO );// 设置css中引用的一些css变量e.target.style.setProperty( "--ratio-x", RATIO.x );e.target.style.setProperty( "--ratio-y", RATIO.y );e.target.style.setProperty( "--from-center", CENTER );});// 数字 🤷‍♀️function fromCenter({ x, y }) {return Math.min(Math.max( 0, Math.sqrt( (y - .5) * (y - .5) + (x  - .5) * (x - .5) ) / .5 ), 1 );}let interacted = false;$("img").on("load", () => {// ⏰ 惰性负载触发不透明度$("main").removeClass("loading");// ✨ 小介绍演示动画$({foo:0}).animate({foo:(Math.PI*3)}, {duration: 8000,easing: "swing",step: function(val) {if ( !interacted ) {document.querySelector("#app").style.setProperty("--ratio-x", (Math.cos(val) + 1.5) / 3);document.querySelector("#app").style.setProperty("--ratio-y", (Math.sin(val) + 2) / 4);}}});});
</script>
</html>

相关文章：

CSS灯光效果，背景黑金效果

先看效果 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>灯光效果</title><link href"https://fonts.googleapis.com/css2?familyCinzel:wght700&amp;dis…...

编程日记 2023/6/12 17:01:31

这里推荐几个前端icon网站（动图网站）

1. Loading.ioLoading.io 是一个免费的加载动效(Loading animations)图标库。它提供了多种风格的加载动效图标,包括 SVG、CSS 和 Lottie 动画格式。这些加载图标可以增强用户体验,为网站和应用程序添加更佳的视觉效果。 网站地址:loading.io - Your SVG GIF PNG Ajax Loading…...

编程日记 2023/6/12 16:56:25

【图神经网络】用PyG实现图机器学习的可解释性

Graph Machine Learning Explainability with PyG 框架总览示例&#xff1a;解释器The Explanation ClassThe Explainer Class and Explanation SettingsExplanation评估基准数据集Explainability Visualisation实现自己的ExplainerAlgorithm对于异质图的扩展解释链路预测 总结…...

编程日记 2023/6/12 16:51:24

HarmonyOS ArkTS Ability内页面的跳转和数据传递

HarmonyOS ArkTS Ability的数据传递包括有Ability内页面的跳转和数据传递、Ability间的数据跳转和数据传递。本节主要讲解Ability内页面的跳转和数据传递。 打开DevEco Studio&#xff0c;选择一个Empty Ability工程模板&#xff0c;创建一个名为“ArkUIPagesRouter”的工程为…...

编程日记 2023/6/12 16:46:23

MySQL 8.0.29 instant DDL 数据腐化问题分析

前言Instant add or drop column的主线逻辑表定义的列顺序与row 存储列顺序阐述引入row版本的必要性数据腐化问题原因分析Bug重现与解析MySQL8.0.30修复方案 前言 DDL 相对于数据库的 DML 之类的其他操作&#xff0c;相对来说是比较耗时、相对重型的操作; 因此对业务的影比较严…...

编程日记 2023/6/12 16:41:22

Haproxy搭建负载均衡

Haproxy搭建负载均衡 一、常见的Web集群调度器二、Haproxy介绍1、Haproxy应用分析2、Haproxy的主要特性3、Haproxy负载均衡策略 三、LVS、Nginx、Haproxy之间的区别四、Haproxy搭建Web群集1、Haproxy服务器部署2、节点服务器部署3、测试Web群集 五、日志定义1、方法一2、方法二…...

编程日记 2023/6/12 16:36:20

SpringBoot：SpringBoot启动加载过程 ④

一、思想 我们看到技术上高效简单的使用&#xff0c;其实背后除了奇思妙想的开创性设计&#xff0c;另一点是别人帮你做了复杂繁琐的事情。 二、从官网Demo入手 官网就一行代码。这个就是它的启动代码。 1、SpringBootApplication注解 ①. 三个核心注解的整合。 SpringBootCon…...

编程日记 2023/6/12 16:31:19

抽象轻松JavaScript

真真假假&#xff0c;鬼鬼&#xff0c;谁知道什么是真什么是假 疑点二&#xff1a;什么是真&#xff0c;什么是假 核心&#xff1a;确定一个清晰的目的&#xff0c;可以达到目的就是真&#xff0c;达不到就是假 知道了核心开始举例 考大学&#xff0c;考上大学就是满足目的…...

编程日记 2023/6/12 16:26:18

深入理解CSS字符转义行为

深入理解CSS字符转义行为 深入理解CSS字符转义行为 前言为什么要转义&#xff1f;CSS 转义什么是合法css的表达式 左半部分右半部分 练习参考链接 前言 在日常的开发中&#xff0c;我们经常写css。比如常见的按钮: <button class"btn"></button>&am…...

编程日记 2023/6/12 16:21:17

【论文阅读】(2023.05.10-2023.06.03)论文阅读简单记录和汇总

(2023.05.10-2023.06.08)论文阅读简单记录和汇总 2023/05/10&#xff1a;今天状态&#xff0c;复阳大残&#xff0c;下午淋了点雨吹了点风&#xff0c;直接躺了四个小时还是头晕- -应该是阳了没跑了。 2023/06/03&#xff1a;前两周出差复阳&#xff0c;这两周调整作息把自己又…...

编程日记 2023/6/12 16:16:16

FPGA开发-ddr测试

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示&#xff1a;这里可以添加技术概要 例如&#xff1a; 本文以米联科开发板为例&#xff0c;介绍ddr测试相关例程。 整体架构流程 提示&#xff1a;这里可以添加技术整体架构 技术名词解释 提示&#xff1a;这…...

编程日记 2023/6/12 16:11:10

BUUCTF 大帝的密码武器 1

题目描述&#xff1a;&#xff08;下载题目&#xff0c;然后修改后缀名为.zip打开&#xff1a;&#xff09; 公元前一百年&#xff0c;在罗马出生了一位对世界影响巨大的人物&#xff0c;他生前是罗马三巨头之一。他率先使用了一种简单的加密函&#xff0c;因此这种加密方法以…...

编程日记 2023/6/12 16:06:09

Linux 查看目录个数和大小

一、查看某目录下的文件个数 1. 查看目录下的文件个数 即当前目录/hdapp目录下有多少个文件&#xff0c;文件夹不计入数值 ls -l | grep "^-"| wc -l下面的命令文件夹也会计入数值 ls | wc -w2. 查看指定目录下的文件个数 如果省略指定目录就是默认当前目录 ls…...

编程日记 2023/6/12 16:01:08

Unity制作二次元卡通渲染角色材质——4 、内外描边和细节添加

Unity制作二次元材质角色 回到目录 大家好&#xff0c;我是阿赵。 这里继续讲二次元角色材质。这次打算讲一下描边和细节的添加。 一、外描边 外描边的做法也不止一种&#xff0c;比如后处理方法的偏导数ddx/ddy之类的&#xff0c;也能整个屏幕的求出边缘。但一般来说单模型渲…...

编程日记 2023/6/12 15:56:06

Ubuntu安装GCC10

使用包安装的方式安装 sudo apt upgradesudo apt install software-properties-commonsudo add-apt-repository ppa:ubuntu-toolchain-r/test QA: 更新python3.7后出现ModuleNotFoundError: No module named ‘apt_pkg‘错误QA: Cannot import name ‘_gi’ sudo apt updatesu…...

编程日记 2023/6/12 15:51:05

【flutter】Dart 规范2

高效 Dart 语言指南&#xff1a;用法示例 每天在你写的 Dart 代码中都会应用到这些准则。库的使用者可能不需要知道你在其中的一些想法&#xff0c;但是维护者肯定是需要的。 库 这些准则可以帮助你在多个文件编写程序的情况下保证一致性和可维护性。为了让准则简洁&#xf…...

编程日记 2023/6/12 15:46:04

k8s CoreDns详解

一、概述 服务发现是 K8s 的一项很重要的功能。K8s 的服务发现有两种方式&#xff0c;一种是将 svc 的 ClusterIP 以环境变量的方式注入到 pod 中&#xff1b;一种就是 DNS&#xff0c;从 1.13 版本开始&#xff0c;coreDNS 就取代了 kube dns 成为了内置的 DNS 服务器。 Cor…...

编程日记 2023/6/12 15:41:03

c++ 连sqlserver

//要在 C 中连接 SQL Server 数据库&#xff0c;可以使用 Microsoft 提供的 SQL Server Native Client 或者 //ODBC 驱动程序。以下是使用 SQL Server Native Client 连接数据库的基本步骤&#xff1a; //1. 安装 SQL Server Native Client 驱动程序。 //2. 在 C 代码中包含头…...

编程日记 2023/6/12 15:36:02

给钉钉的2个建议

1. 建议.MD文件可以实现在线编辑 .MD文件可以实现在线编辑。 现状&#xff1a;word、excel、txt等文件都可以实现在线编辑&#xff0c;期望.MD文件也可以进行在线编辑&#xff0c;便于喜欢用.MD文旦交流的人使用。 2. 增加群内根据关键词自定义提醒功能 随着个人加入的群聊增多…...

编程日记 2023/6/12 15:31:01

STL之优先级队列（堆）的模拟实现与仿函数(8千字长文详解！)

STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数 文章目录 STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数优先级队列的概念priority_queue的接口介绍优先级队列的构造函数 priority_queue模拟实现类成员构造函数向下调整算法——正常实现 push向…...

编程日记 2023/6/12 15:26:00

设施管理系统

随着经济的快速发展&#xff0c;各种基础设施都在更新&#xff0c;在企事业单位中各种设施也都难以管理&#xff0c;以往传统的管理模式已经无法适应现代社会的需求&#xff0c;设备管理的滞后反而会影响设施设备的使用效果&#xff0c;因此设施设备管理系统必不可少。那么什么…...

编程日记 2023/6/12 15:20:58

JavaScript：获取当前日期、星期、时间 | Data对象

文章目录 1 Date对象2 代码示例3 获取 yyyy-MM-dd 格式的日期 1 Date对象 JavaScript 中的 Date 对象表示日期和时间。Date 对象基于自 1970 年 1 月 1 日 00:00:00 UTC&#xff08;协调世界时&#xff09;以来的毫秒数。以下是 Date 对象的一些常用方法和属性。 getFullYear…...

编程日记 2023/6/12 15:15:57

Cadence原理图快速查找元器件的方法

1.Cadence原理图快速查找元器件的方法 ①在红框中输入元器件编号&#xff0c;点击望远镜的图标在底下的状态栏可看到查找到的相关元器件&#xff0c;点击元器件可自动定位当前元器件的位置。 ②点击hierarchy&#xff08;层&#xff09;可自主查找&#xff0c;找到后点击序号即…...

编程日记 2023/6/12 15:10:56

科目二 调整座椅

靠背倾角 座椅高低 座椅前后用手抬起座椅前的横杠&#xff0c;让座椅向后移动方便上车 靠背左侧&#xff0c;向后扳扳杠调整倾角 座椅左侧&#xff0c;上下扳动调整高低头顶距车顶有一拳的距离 座椅前横杠一只手提起横杠另一只手握住方向盘前拉、后推调整到合适位置&#xff0c…...

编程日记 2023/6/12 15:05:55

02.加载GDT表，进入保护模式

加载GDT表&#xff0c;进入保护模式 加载GDT表&#xff0c;实现操作系统从实模式进入保护模式 参考 操作系统学习 — 启动操作系统&#xff1a;进入保护模式 保护模式与实模式 GDT、GDTR、LDT、LDTR 调用门与特权级 趣谈 Linux 操作系统 在01.硬盘启动盘&#xff0c;加载操作系…...

编程日记 2023/6/12 15:00:54

MySQL(进阶篇3.0)

锁 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算机资源&#xff08;CPU、RAM、I/O&#xff09;的争用之外&#xff0c;数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效性是所有数据库必须解决的一个问题&…...

编程日记 2023/6/12 14:55:52

2023.6.8小记——嵌入式系统初识、什么是ARM架构？

今天还挺充实的&#xff0c;早上在图书馆本来想学一下notion&#xff0c;结果看李沐老师的动手深度学习看到十点半&#xff0c;在电脑上配置了李沐老师的d2l和jupyter&#xff0c;等后续有时间的时候再继续学。 下午看了一下notion的使用方法&#xff0c;这玩意初学者用起来是…...

编程日记 2023/6/12 14:50:51

分布式运用之ELK企业级日志分析系统

1.ELK的相关知识 1.1 ELK的概念与组件 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 ElasticSearch&#xff1a; 是基于Lucene&#xff08…...

编程日记 2023/6/12 14:45:50

【华为OD机试真题 C语言】8、停车场车辆统计 | 机试真题+思路参考+代码解析

文章目录 一、题目&#x1f383;题目描述&#x1f383;输入输出&#x1f383;样例1&#x1f383;样例2 二、思路参考三、代码参考&#x1f3c6;C语言 作者&#xff1a;KJ.JK &#x1f342;个人博客首页&#xff1a; KJ.JK &#x1f342;专栏介绍&#xff1a; 华为OD机试真题汇…...

编程日记 2023/6/12 14:40:49

c++ MES 对接(XML、JSON、SOAP）

&#x1f5d1;️ 清空 //MES系统对接可以使用多种协议&#xff0c;包括XML、JSON和SOAP等。 //以下是使用C语言进行MES系统对接的示例代码&#xff1a; //1. XML协议对接&#xff1a; //c #include <iostream> #include <string> #include <vector> #incl…...

编程日记 2023/6/12 14:35:48

哪个网站做农产品/河北seo网络推广

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

编程日记 2025/1/13 2:46:42

建设b2c商城网站/百度指数人群画像哪里查询

1.什么是vuex?官方的理解是&#xff1a;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension&#xff0c;提…...

编程日记 2025/1/13 0:30:33

快速做网站服务好/2023智慧树网络营销答案

数据库批处理 批处理(batch)指的是一次操作中执行多条SQL语句&#xff0c;批处理相比于一次一次执行效率会提高很多。 批处理操作数据库的过程主要是分两步&#xff1a; 将要执行的SQL语句保存执行保存的SQL语句 如何实现批处理 Statement和PreparedStatement都支持批处理操…...

编程日记 2025/1/12 23:34:54

wordpress 企业主题 免费/营销推广seo

1.将表中时间类型的字段更改类型&#xff0c;比如CREATE_TIME,UPDATE_TIMEALTER TABLE ZFTJ_HALF MODIFY CREATE_TIME TIMESTAMP WITH LOCAL TIME ZONE;2.在需要转换的数据库页面点击左上方的工具按钮&#xff0c;选择数据传输&#xff0c;选择好数据源和目标数据库点击…...

编程日记 2025/1/12 22:29:55

wps做网站/市场营销活动策划方案

本段代码实现了java Graphics库的最基本的功能&#xff0c;画一条直线。 import java.awt.Frame; import java.awt.Graphics; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import java.util.Scanner;class MyFrame extends Frame {int x1, y1, …...

编程日记 2025/1/12 21:32:57

惠州响应式网站建设公司/最新热搜新闻事件

本文将介绍了最先进的深度学习优化方法&#xff0c;帮助神经网络训练得更快&#xff0c;表现得更好。有很多个不同形式的优化器&#xff0c;这里我们只找最基础、最常用、最有效和最新的来介绍。 优化器 首先&#xff0c;让我们定义优化。当我们训练我们的模型以使其表现更好…...

编程日记 2025/1/12 21:15:36