Question

我有一个标题文字和下面的按钮。当我将鼠标悬停在按钮上时，标题中的文字和按钮会发抖。我用css属性backface-visibility修复它，然后文本到元素中模糊了。如何在没有模糊效果的情况下解决这个问题？例如https://codepen.io/yozhikk/pen/odJVeY

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777777;
  padding: 30px;
}

.header {
  position: relative;
  height: 95vh;
  background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 131, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  clip-path: polygon( 0% 0%, 0% 100%, 100% 75vh, 100% 0%)
}

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
}

.heading-primary {
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 60px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.heading-primary-main {
  font-weight: 400;
  font-size: 60px;
  letter-spacing: 35px;
  display: block;
  animation: moveInLeft 1.5s ease-out
}

.heading-primary-sub {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 17.4px;
  display: block;
  animation: moveInRight 1.5s ease-out
}

.text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.btn:link,
.btn:visited {
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 100px;
  padding: 15px 40px;
  transition: all .2s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.btn {}

.btn-white {
  background-color: #fff;
  color: #777777;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px)
  }
  80% {
    transform: translateX(10px)
  }
  100% {
    opacity: 1;
    transform: translate(0)
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px)
  }
  80% {
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translate(0)
  }
}

<header class="header">
  <div class="logo-box">
    <img src="img/logo-white.png" alt="" class="logo">
  </div>
  <div class="text-box">
    <h1 class="heading-primary">
      <span class="heading-primary-main">outdoors</span>
      <span class="heading-primary-sub">is where live happens</span>
    </h1>
    <a href="#" class="btn btn-white">Discover our tours</a>
  </div>

Answer 1

删除以下行：

public class CalculatorTests  
{

    public static IEnumerable<object[]> Data =>
        new List<object[]>
        {
            new object[] { 1.2M, 2.1M, 3.3M },
            new object[] { -4.000M, -6.123M, -10.123M }
        };

    [Theory]
    [MemberData(nameof(Data))]
    public void CanAddTheoryMemberDataProperty(decimal value1, decimal value2, decimal expected)
    {
        var calculator = new Calculator();

        var result = calculator.Add(value1, value2);

        Assert.Equal(expected, result);
    }
}

他们在悬停/活动时将按钮向上移动没有明显的原因，我认为这是你正在谈论的晃动。所以只是不这样做应该解决它。

当我在元素上盘旋时，它正在颤抖。如何解决？

1 个答案: