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

2025/3/22 4:31:38 来源：https://blog.csdn.net/u011561335/article/details/146322968 浏览: 次关键词：【css酷炫效果】纯CSS实现虫洞穿越效果

【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>