【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>
效果图
