html - 2个div之一的CSS缩放抖动

标签 html css css-animations

我放了 2 <div>并排添加比例动画和悬停叠加层。然而，当鼠标在区域内移动时，左侧会抖动，而右侧在悬停时非常稳定。

enter image description here

我认为双方使用的代码几乎相同，无法找出问题的原因。抖动的原因是什么？

code here 

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}
<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

最佳答案

您遇到了堆叠元素的复杂情况。您设置了您的叠加层元素 position:absolute 并且第一个定位的祖先是 showcase 因此最初两个叠加层都是重叠的并且填充了 showcase

移除不透明度以注意到这一点:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}
<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

现在悬停时，您将 scale() 添加到叠加层的父元素，这将使它们相对于 transform change the containing block of absolute and fixed element. 后的元素定位。

所以你会得到这个:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}
<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

你在两种状态之间切换，因为在第一个状态中你有重叠，你会在失去悬停效果的地方得到那种不好的效果。第二张图片不会发生这种情况，因为它的叠加层位于顶部，因此您永远不会失去悬停。

为避免这种情况，您可以在最初对您的元素进行变换或考虑对它们使用 position:relative 以确保您的叠加元素相对于它们的父元素定位并且永不重叠:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  opacity:0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}
<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

关于html - 2个div之一的CSS缩放抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58599975/

上一篇：javascript - 一次打印两个索引的数组并拼接这些索引直到数组为空

下一篇：jquery - 如何隐藏div内容直到单击按钮？

相关文章：

javascript - 使用 jquery 上的附加按钮删除附加文本

html - 如何将文本链接添加到下拉导航

html - CSS 列表以未知数量逐渐淡入

javascript - 在加载 ajax 内容时向下移动加载 div

CSS3绘制的背景网格线以半格开头

CSS动画重复而不​​重新加载

Css 动画 : Out left and in right?

html - 不使用容器清除 float

html - 使用 JSF 以编程方式创建 HTML 表单字段集标记

html - 元素为 'Self-Contained' 意味着什么

©2024 IT工具网  联系我们