Question

我目前正在投资我的投资组合网站。我在滚动时使用Javascript来设置标题的动画（我跟着this is the tutorial）。

当您一直滚动到页面顶部时，它基本上会显示更大的标题和徽标。当您向下滚动300像素以下时，它将使用CSS过渡以优雅的方式减小标题的高度。较大的徽标将与较小版本的徽标交换（如下所示）。本教程不适用于图像，但我进行了一些小改动以使其工作。

.logo {
    display: block; 
    float: left;
    width: 180px; height: 60px;
    margin-top: 29px;
    background: url(../images/logo-large.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
}

.logo-shrink {
    display: block; 
     float: left;
    width: 90px; height: 30px;
    margin-top: 14px;
    background: url(../images/logo-small.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
}

我想知道是否有任何方法可以应用CSS转换和转换以使交换更少刺耳？是否可以使用单个图像并向上或向下缩放？如果这是一个愚蠢的问题我很抱歉，我对此很新:)如果您需要我提供更多详细信息，请告诉我。

非常感谢任何帮助：）

Answer 1

最简单的方法是使用CSS3 transforms：

e.g。

<svg style="-webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); -moz-transform: rotateZ(30deg);" width="400" height="180">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9">
</svg>

显然，您可以使用类或其他任何方式应用样式。

Answer 2

只需添加和删除类.logo-shrink，而不是交换类。在类.logo ...

中添加CSS转换

.logo {
    display: block; 
    float: left;
    width: 180px; height: 60px;
    margin-top: 29px;
    background: url(../images/logo-large.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.logo-shrink {
    width: 90px; height: 30px;
    margin-top: 14px;
}

如果动画感觉不稳定，那么你可以在父div上进行转换和转换，因为SVG 1.1不允许在SVG标签上应用这种风格（尽管我认为它在Webkit中也适用）。

是否可以使用CSS变换和过渡来缩放SVG图像？

2 个答案: