html黑洞特效代码
时间: 2024-09-16 22:05:20 浏览: 49
HTML 黑洞特效是一种利用CSS和JavaScript技术制作出视觉上像是“吞噬”周围内容的动态效果。它通常通过设置绝对定位、透明度渐变和元素移动等方式创建。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.black-hole {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.black-hole::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
transform: translateZ(-1px);
}
.black-hole > * {
position: absolute;
animation: fallIn infinite;
}
@keyframes fallIn {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="black-hole">
<div>这是要"吞噬"的内容</div>
</div>
</body>
</html>
```
这个示例中,一个黑色半透明背景逐渐填充整个容器,内部的内容则向下平移进入,给人一种被"吸入"的感觉。
阅读全文