Question

我有一个带有侧栏的网页。顶部是徽标。当侧栏折叠（变小）时，徽标随之变小。代替这种情况，我想改为（动画化）到另一个徽标。

因此，较大的徽标实际上会淡入另一个徽标。

尽管我不是专家，但我还是想使用CSS或jquery来做到这一点。所以我想知道是否有人可以帮助我？

当它变小并且您只能看到CT时，我想转换徽标。

示例：

Answer 1

您可以将您的图像作为背景图片，然后通过媒体查询进行更改。在这种情况下，过渡会起作用。

例如：

.box {
  width: 141px;
  height: 100px;
  transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  -o-transition: 500ms;
  background-image: url(images/picture.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width:800px) {
  .box {
    background-image: url(images/gym.png);
  }
}

<body>
  <div class="box"></div>
</body>

Answer 2

您可以使用“ content”属性CSS。边栏折叠时，您可以设置较小徽标的新网址，并使用过渡效果为更改添加动画效果。

希望它能对您有所帮助。最好的祝福，伊曼纽尔

Answer 3

尽管纯CSS可以做到这一点，但是jquery则更容易。这是一个例子

$('.logo-btn').click(function() {
    $('.logo-large').toggleClass('hide');
});

nav {
  height: 60px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
}

nav > span {
  height: 100%;
  display: flex;
  align-items: center;
  background: #2b2b2b;
  width: fit-content;
  padding: 0 40px;
  color: white;
  font-size: 1.2em;
  transition: all 500ms ease;
  white-space: nowrap;
}

.hide {
  width: 0;
  padding: 0;
  opacity: 0;
}

button {
  margin-left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <span>CT</span>
    <span class="logo-large">Creative Tim</span>
    <button class="logo-btn">click me</button>
</nav>

您当然可以在CSS中进行调整，以使动画更流畅。

当图像变得小于特定尺寸时，如何更改图像源？

3 个答案: