Question

我有以下代码在浏览器调整大小时转换为移动图像，但更改它太突然了。我希望它有动画。有办法吗？另外，我正在使用Bootstrap和AngularJs，所以我有没有一种内置在这些框架中的方法来为我做这个？

<a href="/">
  <div class="logo">
    <img id="desktoplogoimage" src="images/logo.png" alt="">
    <img id="logoimage" src="images/logo-mobile.png" alt="">
  </div>
</a>


.logo img {
  display:block;
}

.logo img+img {
  display:none;
}


@media only screen and (min-width: 150px) and (max-width: 600px) {
  .logo img {
    display:none;
  }

  .logo img+img {
    display:block;
  }
}

Answer 1

如果你想要一个只有CSS的解决方案，这是一个我快速整理的例子。调整小提琴窗口的大小以查看效果。

DEMO http://jsfiddle.net/fgasU/613/

img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width:50%;
    position: absolute;
    left:0;
    top:0;
}
.small {
    opacity:0;
}
@media only screen and (min-width: 150px) and (max-width: 600px) {
    .large {
        opacity:0;
    }
    .small {
        opacity:1;
    }
}

Answer 2

.logo img {
   display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

.logo img+img {
   display:block;
}

添加不透明度然后转换为上面的内容！

Answer 3

如果图像的分辨率相同，则可以在div增加图像尺寸时将图像调整为徽标div。

对于不同的图像，您可以使用CSS转换

.logo img {
  display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

.logo img+img {
   display:block;

}

我怎样才能使用CSS Header Logo切换响应式UI

3 个答案: