html无限循环悬浮窗,全屏悬浮
时间: 2023-07-19 19:17:50 浏览: 108
好的,以下是一个实现全屏悬浮的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏悬浮窗</title>
<style>
#floating-box {
position: fixed;
background-color: #f44336;
color: #fff;
padding: 10px;
border-radius: 10px;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="floating-box">这是一个全屏悬浮窗</div>
</body>
</html>
```
这段代码中,我们将悬浮窗的位置设置为固定的,宽度和高度都设置为100%,使其占据整个页面,然后使用`display: flex`和`align-items: center`、`justify-content: center`属性将其置于页面中央。同样使用`animation`属性实现无限循环旋转的效果。
需要注意的是,全屏悬浮窗可能会对用户造成更大的干扰,因此在实际应用中需要谨慎使用,特别是在需要用户专注于内容的页面中。
阅读全文