实现如下面图片所示的十字架形状。要求:保证随着浏览器视窗大小的变化十字架可以总是保持在屏幕中间位置
您可以使用CSS和HTML来实现这个需求。以下是一个示例代码:
HTML代码:
<div class="cross"></div>
CSS代码:
.cross {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid black;
}
.cross::before,
.cross::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 80px;
width: 2px;
background-color: black;
}
.cross::before {
transform: translate(-50%, -50%) rotate(90deg);
}
.cross::after {
transform: translate(-50%, -50%) rotate(180deg);
}
这段代码中,div元素的类名为"cross",使用position: fixed将其固定在屏幕上。top: 50%和left: 50%将其定位在屏幕的中心位置。transform: translate(-50%, -50%)用于微调位置,使其准确居中。
使用伪元素::before和::after创建两个竖直和水平的线条。通过设置content: ""来显示伪元素,position: absolute将其相对于父元素进行定位,并使用transform: translate(-50%, -50%)将其居中。
加上适当的样式可以实现屏幕大小变化时十字架保持在屏幕中间位置的效果
原文地址: https://www.cveoy.top/t/topic/ixow 著作权归作者所有。请勿转载和采集!