在没有媒体查询的情况下 table 行交叉的中心页面上的锚图像

Question

https://jsfiddle.net/ze5k4cqb/ 如何用 table 线交叉覆盖的图像覆盖页面的中心？不用媒体查询也能做到？对于媒体查询，对于边距的百分比也是如此

        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 40%;
        right: 40%;

它因不同的分辨率设置而失败。有没有 3000 行媒体查询就可以做到这一点的技巧？

Answer 1

悬停时的炫酷动画。我只能说 transform: translate 是你的朋友。您有一些奇怪的负边距，所以我不得不在翻译中使用 calc 函数考虑到这一点。

我还添加了 pointer-events: none，因此即使将鼠标悬停在 .logo-div 上也可以触发象限动画。

#container {
  position: relative;
}

.logo-div {
  left: 50%;
  top: 50%;
  width: 30%;
  transform: translate(calc(-50% - 15px), -50%);
  position: absolute;
  z-index: 100;
  display: flex;
  pointer-events: none;
}

在没有媒体查询的情况下 table 行交叉的中心页面上的锚图像

Anchor image over the center page where the table lines cross without media queries

css

html-table

image

responsive