Question

以下是我无法解决的一些问题。

当您将鼠标悬停在图像上时，我会设置一些样式的动画，但正如您将看到的，当边框大小增加时，其他所有内容都随之移动。
当您将sidetext更改为更长或更短的内容时，它会决定移动位置。

请有人解释我做错了吗？

＆＃13;

/* 
Colors:
#FF0F00 = red
#FFFF04 = yellow
#387F23 = green
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: yellow;
  font-family: Arial, Helvetica, sans-serif;
}

.animate {
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

.one {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.two {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

.three {
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

.four {
  -webkit-animation-delay: 3.3s;
  -moz-animation-delay: 3.3s;
  animation-delay: 3.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/* FADE IN RIGHT */

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.hero__img img {
  max-width: 100%;
  vertical-align: middle;
}

.hero__center:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  /* z-index: -1; */
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

@media (min-width: 920px) {
  .hero {
    margin: 0 auto;
    width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  .hero__heading {
    position: absolute;
    font-size: 80px;
    color: #0004f3;
    text-transform: uppercase;
    font-weight: bold;
    font-kerning: -3px;
    letter-spacing: 4px;
    z-index: 1;
  }

  .hero__heading--top {
    left: -85px;
    top: -150px;
    opacity: 1;
  }

  .hero__heading--bottom {
    right: -85px;
    bottom: -150px;
    opacity: 1;
  }

  .hero__center {
    position: relative;
    border: 5px solid blue;
    transition: border 0.4s ease-in;
  }

  .hero__center:hover {
    border: 10px solid #387F23;
    transition: border 0.4s ease-in;
  }

  .hero__center:hover:after {
    opacity: 0.4;
    transition: opacity 0.4s ease-in;
  }

  .hero__center:hover .hero__sideText {
    color: red;
    transition: color 0.4s ease-in;
  }

  .hero__img img {
    opacity: 1;
    transition: opacity 0.4s ease-in;
  }

  /* .hero__img:hover img {
    opacity: 0.4;
    transition: opacity 0.4s ease-in;
  } */
  /* .hero__center:hover {
    border: 5px solid green;
    transition: border 0.5s;
  } */
  
  .hero__sideText {
    position: absolute;
    top: 50%;
    color: #0004f3;
    transition: color 0.4s ease-in;
  }

  .hero__side--left {
    left: -50px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: center center;
  }

  .hero__side--right {
    right: -50px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    transform-origin: center center;
  }
}

＆＃13;

<div class="container">
  <div class="hero animate fadeIn one">
    <div class="hero__center">
      <span class="hero__heading hero__heading--top animate fadeInLeft one">Lorem</span>
      <span class="hero__heading hero__heading--bottom animate fadeInRight one">Ipsum</span>
      <div class="hero__img">
        <img src="http://via.placeholder.com/980x550" alt="">
      </div>
      <span class="hero__sideText hero__side--left">Side text</span>
      <span class="hero__sideText hero__side--right">Side text</span>
    </div>
  </div>
</div>

＆＃13;

Answer 1

由于通过更改边框宽度来更改框的大小，因此元素也会改变它们的位置。

尝试添加：

.hero__center:hover {
        margin:-5px;
}

反对边境变化。

2。变换旋转使用元素的中心点作为其原点（transform-origin：center center;）。增加字符时，增加宽度，使旋转选择的点也随之移动。

要更改您必须将该点修复到特定位置。尝试使用以下css在sideText spans周围添加div包装器：

.wrapper-left {
  position:relative;
  left: -50%;
}

.wrapper-right {
  position:relative;
  left: 50%;
}

CSS3动画 - 两个问题

1 个答案: