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

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

article 2025/3/19 20:41:05

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