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

【css酷炫效果】纯CSS实现虫洞穿越效果

article 2026/3/5 10:42:06

【css酷炫效果】纯CSS实现穿越效果

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版（虫洞穿越）
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90491973

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="text"></div>

css样式

body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #c9b0b0; /* 背景颜色 */
}.text {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));animation: curtainWave 1s infinite;
}@keyframes curtainWave {0% {transform: scale(0);opacity: 1;}100% {transform: scale(2);opacity: 0;}
}

完整代码

基础版

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #c9b0b0; /* 背景颜色 */
}.text {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));animation: curtainWave 1s infinite;
}@keyframes curtainWave {0% {transform: scale(0);opacity: 1;}100% {transform: scale(2);opacity: 0;}
}
</style></head>
<body><div class="text"></div></body>
</html>

进阶版（虫洞穿越）

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #c9b0b0; /* 背景颜色 */
}.text {border-radius: 100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));animation: curtainWave 1s infinite;
}@keyframes curtainWave {0% {transform: scale(0);opacity: 1;}100% {transform: scale(2);opacity: 0;}
}
</style></head>
<body><div class="text"></div></body>
</html>

效果图

在这里插入图片描述

【css酷炫效果】纯CSS实现虫洞穿越效果

【css酷炫效果】纯CSS实现穿越效果缘创作背景html结构css样式完整代码基础版进阶版（虫洞穿越） 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90491973 缘创作随缘，不定时…...

编程日记 2026/2/23 8:58:38

Linux IP 配置

Linux IP 配置 1 环境介绍2 网卡信息配置3 使用nmtui工具配置4 更多Linux命令学习使用列表 1 环境介绍虚拟机，服务器安装系统完成后，先要配置ip 地址，这样可以方便远程若是物理服务器一般会有4个网卡信息麒麟v10，CentOS7&#x…...

编程日记 2026/3/1 5:06:51

设计模式之装饰器模式：原理、实现与应用

引言装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许你通过将对象放入包含行为的特殊封装对象中来为原对象动态添加新的行为。装饰器模式提供了一种灵活的替代方案，避免了通过继承扩展功能的局限性。本文将深入探讨装…...

编程日记 2026/2/14 19:51:05

c语言笔记结构体基础

目录基础知识结构体定义基础知识在c语言中变量是有类型的，比如整型，char型，浮点型等，这些都是单一的类型，那么如果说我要定义一个学生的信息，那么这些单一的类型是不足以表达一个学生的全部信息&#…...

编程日记 2025/12/14 16:10:19

Vue 登录记住密码，设置存储时间

Vue 登录记住密码，设置存储时间一、手动存储login.vue 二、使用vue-cookies插件main.jslogin.vue 一、手动存储 login.vue 提示： // 设置cookie方法 setCookie(loginName, password, days) {let text encryptDes(password, des123)//使用des方法加…...

编程日记 2025/12/11 17:54:36

C++ 学习笔记（三）—— 入门+类和对象

1、内联函数（inline） 内联函数主要是解决C语言的宏的缺陷提出来的； 宏的缺陷： 1）容易出错，语法坑很多； 2）不能调试； 3）没有类型安全的检查； 宏的…...

编程日记 2026/2/14 1:30:14

KVM安全模块生产环境配置与优化指南

KVM安全模块生产环境配置与优化指南一、引言在当今复杂多变的网络安全环境下，生产环境中KVM（Kernel-based Virtual Machine）的安全配置显得尤为重要。本指南旨在详细阐述KVM安全模块的配置方法，结合强制访问控制（M…...

编程日记 2026/2/15 2:51:24

基于 SSE 和 WebSocket 的在线文本实时传输工具

简介在线文本实时传输工具支持 SSE（Server-Sent Events） 和 WebSocket，可在不同设备间快速共享和同步文本，适用于跨设备协作、远程办公和即时通讯。核心功能实时同步：文本输入后，另一端用户可立即看到…...

编程日记 2026/2/15 1:14:50

数图亮相第三届全国生鲜创新峰会，赋能生鲜零售数字化转型

2025年3月15-18日，第三届全国生鲜创新峰会在湖北宜昌召开，主题为“生鲜破局，重塑价值”。峰会汇聚行业专家、企业领袖及精英，探讨生鲜零售新机遇与挑战。作为领先的“智慧零售”服务商，数图信息科技受邀出席&#xff0…...

编程日记 2026/2/17 4:52:04

1、依赖安装： # 安装 swag 命令行工具 go install github.com/swaggo/swag/cmd/swaglatest# 安装 gin-swagger 和 swagger 文件的依赖 go get -u github.com/swaggo/gin-swagger go get -u github.com/swaggo/files 2、测试 cmd中输入： swag -v 3、…...

编程日记 2026/2/15 0:29:14

CH347使用笔记：CH347结合STM32CubeIDE实现单片机下载与调试

目录基于 STM32CubeIDE的 CH347 JTAG/SWD调试器使用说明1. CH347驱动安装与配置2. STM32CubeIDE调试器配置2.1 打开相关工程后，进行以下操作2.2 openocd.exe替换2.3 脚本添加2.4 更改调试器选择 3. 下载程序4. 使用过程中可能遇到的问题4.1 CH347未插入4.2 Openocd…...

编程日记 2026/2/15 22:13:12

从C语言开始的C++编程生活（1）

前言本系列文章承接C语言的学习，需要有C语言的基础才能学会哦。第1篇主要讲的是有关于C的命名空间、输入和输出。 C才起步，都很简单呢！ 目录前言命名空间namespace 基本语法作用使用命名空间域作用限定符 :: 基本语法 using n…...

编程日记 2026/2/14 21:37:06

Python F-String 深度解析：原理、用法与最佳实践

# Python F-String 深度解析：原理、用法与最佳实践 ## 一、引言 Python 的 F-String（格式化字符串字面值）自 3.6 版本引入以来，凭借其简洁性和高效性，迅速成为字符串格式化的首选方案。本文将从原理、核心用法和编码规…...

编程日记 2026/2/14 19:18:19

智能家居分享

因为最近沉迷智能家居，所以来给大家分享一些轻松改变生活体验的小家具 1： 智能门锁出门忘记带钥匙是许多人都遇到过的尴尬事，智能门锁的出现完美解决了这个困扰。智能门锁采用指纹识别、密码、刷卡、手机等多种开锁方式，大大增…...

编程日记 2026/2/21 9:49:15

20. Excel 自动化：Excel 对象模型

一 Excel 对象模型是什么 Excel对象模型是Excel图形用户界面的层次结构表示，它允许开发者通过编程来操作Excel的各种组件，如工作簿、工作表、单元格等。 xlwings 是一个Python库，它允许Python脚本与Excel进行交互。与一些其他Python库&#x…...

编程日记 2026/2/19 10:04:53

解决uni-app授权弹框华为审核拒绝

背景： 在使用定位、相机、文件、电话，需要用户同意授权时，华为和vivo需要告知用户使用权限目的。方案： 在uni授权时，弹框告诉授权目的，效果如下： 代码： const perListener {//…...

编程日记 2026/2/12 19:20:21

施耐德PLC仿真软件Modbus tcp通讯测试

安装仿真软件：EcoStruxure™ Control Expert - PLC 仿真器下载地址：https://www.schneider-electric.cn/zh/download/document/EIO0000001719/ 配置CPU： 切换至仿真模式，系统托盘中出现仿真器图标新建变量test，地址…...

编程日记 2026/2/15 14:55:30

软考中级软件设计师考点知识点笔记总结 day05

文章目录 4、栈和队列4.1、栈的定义4.2、队列定义 5、串、数组、矩阵和广义表5.1、串5.2、数组5.3、稀疏矩阵5.4、广义表 4、栈和队列 4.1、栈的定义线性表是具有相同数据类型的n个数据元素的有限序列， n为表厂。n0时线性表是一个空表 L （a1,a2,a3…...

编程日记 2026/2/20 7:47:07

1.排序算法（学习自用）

1.冒泡排序算法步骤相邻的元素之间对比，每次早出最大值或最小值放到最后或前面，所以形象的称为冒泡。特点 n个数排序则进行n轮，每轮比较n-i次。所以时间复杂度为O(n^2)，空间复杂度为O(1)，该排序算法稳定。代码…...

编程日记 2026/2/25 16:26:40

vs2017版本与arcgis10.1的ArcObject SDK for .NET兼容配置终结解决方案

因电脑用的arcgis10.1,之前安装的vs2010正常能使用AO和AE，安装vs2017后无法使用了，在重新按照新版本arcgis engine或者arcObject费时费力，还需要重新查找资源。用vs2017与arc10.1的集成主要两个问题，1：安装后vs中没有…...

编程日记 2026/2/15 16:39:15

基于yolo11+flask打造一个精美登录界面和检测系统

这个是使用flask实现好看登录界面和友好的检测界面实现yolov11推理和展示，代码仅仅有2个html文件和一个python文件，真正做到了用最简洁的代码实现复杂功能。测试通过环境： windows x64 anaconda3python3.8 ultralytics8.3.81 flask1.1.…...

编程日记 2026/2/15 18:26:03

用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件

回顾 3年前曾经用 Vue 2.0 开发了一个甘特图组件，如今3年过去了，计划使用Vue 3.5 TypeScript 把组件重新开发，有机会的话再开发一个React版本。关于之前的组件以前文章 Vue 2.0 甘特图组件下面录屏是是用 Vue 3.5 TypeScript 开发的目前…...

编程日记 2026/2/15 9:49:03

深入解析 SQL 事务：确保数据一致性的关键

SQL 事务什么是 SQL 事务？事务的 ACID 特性原子性（Atomicity）:示例： 一致性（Consistency）:示例： 隔离性（Isolation）:持久性（Durability）:示例&am…...

编程日记 2026/2/15 21:27:53

复习JVM

JVM的三个主要主题: 1.java内存区域划分: a. 堆 b. 栈 c. 元数据区 d. 程序计数器 2. 类加载 a. 加载: 打开.class文件, 读取内容 b. 验证: 验证.class文件的格式是否符合要求. c. 准备: 给类对象分配内存空间 d. 解析: 初始化字符串常量 e. 初始化: 对类对象中的各个…...

编程日记 2026/2/15 0:31:18

C++程序设计语言笔记——抽象机制：元编程

0 使用元编程提高类型安全。使用元编程提升类型安全的核心在于通过代码生成、编译时检查或类型约束自动化来减少运行时错误。以下分不同编程范式详细说明实现方案： 一、静态类型语言的编译期约束（以C为例） template<typename T> cl…...

编程日记 2026/2/15 12:39:28

基于STM32的火灾报警设备（阿里云平台）

目录前言： 一、项目介绍和演示视频二、硬件需求准备三、硬件框图 1. 原理图 2. PCB 四、CubeMX配置五、代码框架前言： 源代码下载链接： https://download.csdn.net/download/m0_74712453/90474701 需要实物的可以私信博主或者…...

编程日记 2026/3/2 2:24:12

用uv管理python环境/项目(各种应用场景)

一、安装uv 有python的情况 pip install uvWindows powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"linux或macOS curl -LsSf https://astral.sh/uv/install.sh | sh二、换镜像源 uv不会读取pip的镜像源配置，所…...

编程日记 2026/2/15 6:40:11

java面试题之多线程

java面试题之多线程什么是线程？什么是线程安全和线程不安全？什么是⾃旋锁？什么是CAS？什么是乐观锁和悲观锁？什么是AQS？什么是原⼦操作？在Java Concurrency API中有哪些原⼦类(atomic classes)&…...

编程日记 2026/2/18 1:58:28

FPGA-流水灯

Quartus中使用Verilog实现根据之前所学内容，打开Quartus 软件，新建FPGA项目文件，建立好空项目过后，选择Verilog HDL File，因为我们要使用Verilog代码实现仿真。详细操作可参考往期博客： FPGA 实验报告&a…...

编程日记 2026/2/15 20:39:16

browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案

browser-use WebUI 一、browser-use是什么Browser-use采用的技术栈为： 二、browser-use webui 主要功能使用场景三、使用教程1.python 安装2、把项目clone下来3、安装依赖4、配置环境5、启动6、配置1.配置 Agent2.配置要用的大模型3.关于浏览器的一些设置四、Deep…...

编程日记 2026/2/14 19:49:45