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

网站开发立项申请表网页设计公司简介模板

wzjs 2025/9/4 17:39:54

网站开发立项申请表,网页设计公司简介模板,汕头手机网页制作,网站建设课设总结报告【css酷炫效果】纯CSS实现穿越效果缘创作背景html结构css样式完整代码基础版进阶版（虫洞穿越） 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90491973 缘创作随缘，不定时…

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