html长宽高都五十cm的矩形,全屏上下左右飘动
时间: 2023-10-24 21:07:45 浏览: 51
好的,以下是一个实现长宽高都为50cm的矩形全屏上下左右飘动的示例代码:
```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;
width: 50cm;
height: 50cm;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
top: 0;
left: 50%;
}
25% {
top: 50%;
left: 50%;
}
50% {
top: 50%;
left: 0;
}
75% {
top: 50%;
left: 50%;
}
100% {
top: 50%;
left: 100%;
}
}
</style>
</head>
<body>
<div id="floating-box">这是一个长宽都为50cm的矩形</div>
</body>
</html>
```
这段代码中,我们使用了CSS中的`width`和`height`属性分别设置矩形的长和宽为50cm,然后将其位置设置为固定的,并使用`transform`属性将其置于页面中央。使用`animation`属性实现矩形的上下左右飘动的效果。通过`@keyframes`中的关键帧,我们可以设置矩形在不同时间点的位置和状态。
需要注意的是,长宽为50cm的矩形在不同设备上的大小可能会有所不同,因此在实际应用中需要进行调整。另外,这种飘动效果可能会对用户造成干扰,因此在实际应用中需要谨慎使用,特别是在需要用户专注于内容的页面中。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)