HTML翻转卡片功能异常、Logo重叠等多问题技术求助

Hey there! Let's work through each of your problems and get your flip card running smoothly:

1. Fix Logo Alignment & Overlap #

Your logos were sticking to borders and overlapping because the flip card spanned the entire screen, and the footer's forced 100vh height clashed with body padding. Here's the fix:

• Set a fixed, centered size for the flip card so it doesn't take up the whole viewport
• Add padding inside the card's inner container to create space between content and borders
• Adjust the footer layout to use flex naturally without forcing full viewport height

2. Enable Hover Scale for Stackoverflow Logos #

The hover scale wasn't working reliably due to misplaced padding and layout interference. We'll:

• Move spacing from the images to their parent <a> tags to prevent overlap
• Ensure smooth transitions are applied consistently to icons and their containers
• Clean up commented code that could cause syntax confusion

3. Change Loading Bar Color on Card Back #

To make the loading bar white when the card flips to the back, we'll target the loading bar specifically within the .flip-card-back container and override its background color.

4. Improve Flip Trigger Precision #

Right now, the whole body triggered the flip because the card was set to 100% width/height. We'll give the card a defined size and center it, so only hovering over the card itself triggers the flip.

Full Corrected Code #

<html>
<style>
/* Base styles */
.img { max-width: 100%; }
a.icon-link {
  margin: 0 15px; /* Add spacing between icons to prevent overlap */
  display: inline-block; /* Ensure hover applies correctly */
}

/* Header styles */
.Headerstyle {
  color: Black;
  transition: transform .2s;
  text-align: center;
  margin-top: 2rem;
}
.Headerstyle:hover {
  transform: scale(1.5);
}
.HeaderstyleBack {
  color: white;
  transition: transform .2s;
  text-align: center;
  margin-top: 2rem;
}
.HeaderstyleBack:hover {
  transform: scale(1.5);
}

/* Icon styles */
.image1, .image2, .imageback1, .imageback2 {
  transition: transform .2s;
  width: 60px;
  height: 60px;
}
.image1:hover, .image2:hover, .imageback1:hover, .imageback2:hover {
  transform: scale(1.5);
}

/* Footer and container */
.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  height: 100%;
}
.container {
  margin: 1rem 0;
}

/* Loading bar */
.Loading {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 7px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 4px;
  overflow: hidden;
}
.Loading:after {
  content: '';
  position: absolute;
  background: blue;
  width: 10%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  animation: load 5s infinite;
}
/* White loading bar for back of card */
.flip-card-back .Loading:after {
  background: white;
}

/* Body styles */
body {
  margin: 2rem;
  padding: 0;
  animation: pulse 5s infinite;
}

/* Flip card styles */
.flip-card {
  background-color: transparent;
  width: 400px; /* Fixed width for precise trigger */
  height: 600px; /* Fixed height */
  margin: 0 auto; /* Center the card */
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2.8s;
  transform-style: preserve-3d;
  padding: 1rem; /* Add padding inside card to prevent content touching borders */
  box-sizing: border-box; /* Ensure padding doesn't increase card size */
}
/* Trigger flip only when hovering the flip-card itself */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
}
.flip-card-front {
  background-color: #FFFDD0;
  color: black;
}
.flip-card-back {
  background-color: orange;
  color: white;
  transform: rotateY(180deg);
}

/* Animations */
@keyframes load {
  0% { left: 0%; }
  25% { width: 50%; left: 50% }
  50% { width: 10%; left: 90% }
  75% { width: 50%; left: 0% }
  100% { width: 10%; left: 0% }
}
@keyframes pulse {
  0% { border-color: gray; }
  25% { border-color: gray; }
  50% { border-color: gray; }
  75% { border-color: #282828; }
  100% { border-color: #282828; }
}
</style>
<body>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div class="footer">
        <p class="Headerstyle"><b>Get in Touch With Me</b></p>
        <div style="display: flex;justify-content: center;">
          <a href="#" class="icon-link"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon"></a>
          <a href="#" class="icon-link"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon"></a>
        </div>
        <div class="container"></div>
        <div class="Loading"></div>
      </div>
    </div>
    <div class="flip-card-back">
      <div class="footer">
        <p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
        <div style="display: flex;justify-content: center;">
          <a href="#" class="icon-link"><img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon"></a>
          <a href="#" class="icon-link"><img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon"></a>
        </div>
        <div class="container"></div>
        <div class="Loading"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者user14178341