Trung tâm cá nhân
sách gpt4 ai đã đi

Biến đổi tỷ lệ gây ra khoảng cách/đường thẳng

In lại 作者：行者123 更新时间：2023-11-28 08:50:47 29 4
mua khóa gpt4 Nike

我目前正在构建一个网站，但遇到了 transform: scale 的问题。我有一个按钮，当用户将鼠标悬停在它上面时，会发生两件事:

  1. 背景以对 Angular 线“扫过”
  2. 按钮标签颜色改变
  3. 按钮稍微变大

我已经开始工作了，它看起来非常好，但是在实现第 3 点之后，当按钮变大时，我看到左侧有一个奇怪的间隙。

Đây là mã của tôi:click for demo

HTML

Hover

CSS

thân hình {
    căn chỉnh văn bản: ở giữa;
    padding-top: 10%;
}

.button {
    hiển thị: khối nội tuyến;
    text-transform: chữ hoa;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    border: 3px solid green;
    color: green;
    vị trí: tương đối;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 20px 35px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    vị trí: tuyệt đối;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  transform: scale(1.1);
}

这是我看到的差距的屏幕截图。此问题出现在 Chrome 和 Safari 中(我没有测试过 Firefox 或 IE，因为我无法在工作中下载它们)。

Screenshot of weird gap

1 Câu trả lời

它“仅”出现在 Chrome 而不是 Firefox(编辑:在 Edge 中更糟:首先它在左侧然后在底部...)。不确定是否是舍入错误或其他原因导致了这个差距，但我发现用 box-shadow 替换 ranh giới 可以改善渲染效果。
在过渡结束时仍然可以看到一个间隙，但最终消失了，所以我在 :hover 上添加了 2 个框阴影:新的插入并填充了 "border 之间的间隙/box-shadow" Và内容框更快。

代码笔:http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100 

thân hình {
    căn chỉnh văn bản: ở giữa;
    padding-top: 10%;
}

.button {
    hiển thị: khối nội tuyến;
    text-transform: chữ hoa;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
    color: green;
    vị trí: tương đối;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 19px 34px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: transform ease-out .25s;
    width: 200%;
    height: 100%;
    vị trí: tuyệt đối;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
  transform: scale(1.1);
}
Hover

编辑:使用转换后的大小:伪

.button:before {
  content: ' ';
  transition: all ease-out .25s;
  width: calc(200% + 6px);
  height: calc(100% + 6px);
  vị trí: tuyệt đối;
  top: -3px;
  left: -3px;
  transform-origin: 0 3px;
  z-index: -1;
  transform: skewX(-45deg) translateX(-100%);
  background: green;
}

考虑到边框，但由于 overflow: hidden 而不会改变任何内容。

所以这是我的第三次尝试:通过添加一个容器(或将 A 元素作为容器)并将边框保留在子元素上，它使间隙消失(溢出在边框周围)。

代码笔:http://codepen.io/PhilippeVay/pen/ZBbKWd 

thân hình {
    căn chỉnh văn bản: ở giữa;
    padding-top: 10%;
}
a {
  hiển thị: khối nội tuyến;
  overflow: hidden;
    background: transparent;
    transition: all ease .25s;
    color: green;
    vị trí: tương đối;
    z-index: 2;
    font-family: sans-serif;
    text-decoration: none;
}
a > span {
    hiển thị: khối nội tuyến;
    text-transform: chữ hoa;
    font-size: 1.1em;
    font-weight: 600;
    border: 3px solid green;
    padding: 20px 35px;
}

a:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    vị trí: tuyệt đối;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

a:hover:before {
    transform: translateX(0);
}

a:hover {
  color: white;
  transform: scale(1.1);
}
Hover

Fx 完美过渡到最后……并通过在右侧添加 2px 来“修正”宽度。但它已经在你的 jsbin 中可见，所以这是另一个故事(我想不那么烦人，因为用户会点击恕我直言)

关于css - 转换比例导致间隙/线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40504186/

29 4 0
Bài viết được đề xuất: javascript - jQuery puff 效果在应用效果后返回 Div？
Bài viết được đề xuất: javascript - 使用 Cookie 向自己发送 POST 表单，适用于移动设备吗？
Bài viết được đề xuất: java - Android 上的 HighChart 动态更新
Bài viết được đề xuất: javascript - 如何测试 Three.js 中光线拾取的错误？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com